Title: next. Introduction to js

Tag: next, js, react

prologue

Server side rendering

  • SSR: Server Side Rendering, THE HTML page is rendered by the Server, and the client requests the complete HTML page.
  • Egg, PHP, JSP, etc. are good server-side rendering techniques.
advantages
  • Seo optimization.
  • Optimize the loading speed of the first screen: instead of loading a single page application, only the current page content is loaded, instead of loading a large number of JS.
disadvantages
  • You can’t use the browser console to view data flow.
  • It is not a best practice to separate the front and back ends.

SEO

  • SEO: Search Engine Optimization (SEO), the use of Search Engine rules to improve the natural ranking of a site within the relevant Search engines.
  • Provide ecological self-marketing solutions for websites, allowing them to occupy a leading position in the industry and gain brand benefits.
  • SEO includes two aspects: off-site SEO and in-site SEO.
  • From the site structure, content construction scheme, user interaction communication, page and other aspects of reasonable planning, from the search engine to get more free traffic.

The installation

  • Install React and react-dom at the same time
yarn next react react-dom --save
Copy the code
  • Write the script field in package.json
{
  "scripts": {
    "dev": "next"."build": "next build"."start": "next start"}}Copy the code

The directory structure

By default:

  • Each.js file is a route.
  • ./page is the server’s rendering index
  • Files in./static map to /static/ routes

Write the Hello World page

  • Write a stateless page component
// ./page/index.js

var num = 1
num ++ 
console.log(num)

function click () {
  console.log(num++)
}

export default() = > (<div onClick={click}>Hello Next.js</div>
)

Copy the code

The development of

yarn dev 
yarn dev -p 8080// Specify a port numberCopy the code

  • The global code in a single JS file is common to both the server and the client. Processing pure server logic in a global file at one time can cause errors, and vice versa.

  • Click div to print num and increment it, as the React component would do.

Get the data and component lifecycle

  • The server renders a common business scenario: it takes database (or other server) data, returns it, inserts it into a page, generates a full page and returns it to the client.
  • As mentioned earlier, this logic cannot be written globally because both the code server and client are running, and because this is an asynchronous process, the logic must be run in an asynchronous function or callback function.

getInitialProps

  • The change method is executed only once on the server when the page loads.
  • This method is executed on the client only during route switchover.
  • The return value of the method is injected into the component and the data can be retrieved at client run time
  • The properties of the parameter to the getInitialProps method are: Query – The query part of the URL, and is parsed into the object asPath – the actual path (including the query part) displayed in the browser, Req – HTTP request object (server only) RES – HTTP return object (server only) jsonPageRes – Get data response object (client only) ERR – Any errors in the rendering process

import {Component} from 'react'

export default class App extends Component {
  static async getInitialProps(obj) {
    console.log(obj)
    console.log('where called')
    var fetch = (url) = > {
      return new Promise((res, rej) = > {
        res('Get the data and render it')})}let response = await fetch('/static/demo.json')
    console.log(response)
    return {response}
  }

  state = {
    num: 1
  }

  add = (a)= > {
    this.setState((state) = > {
      return state.num++
    })
  }

  render () {
    return (
      <div>
        <div>{this.props.response}</div>
        <div>{this.state.num}</div>
        <button onClick={this.add}>++</button>
      </div>)}}Copy the code
  • After the above code runs, the getInitialProps method executes on the server, emulates a fetch request on the server side, and renders the page after the data is returned.
  • You can right-click the browser and choose View Page source to view the content of the initial HTML page sent from the server to the client. Here is the main section, as you can see the data has been pre-rendered.
<div>Get the data and render it</div><div>1</div><button>++</button></div></div>
Copy the code

compatibility

Next.js supports IE11 and all modern browsers use @babel/preset-env. To support IE11, Next. Js needs to add Promise’s polyfill globally. Sometimes parts of your code or other NPM packages introduced will not be supported by modern browsers and will need to be polyfills.

  • Polyfills default configuration joins.
  • The development environment uses the new APIS of ES6, Set, etc. These new apis are the root cause of the failure of older browsers.
  • Next. Js can be used as a solution to improve the performance of React applications and optimize the first screen loading speed of React applications, making seo optimization of single-page applications possible.
  • The scaffolding provided by next. Js, the development environment is simple to build, the development has the support of “hot update”, the development is very comfortable.
  • React is a framework for building complex applications. It uses a lot of ES6 features and is not compatible with react. Next.

The original link

【 finish 】 Welcome to star && issue