React SSR

Time:2021-11-29

Recognize SSR

1. Why is SSR needed?

  • Limitations of single page rich applications:

    • For the application we developed before, if you right-click to directly view the source code, you can see that there is almost nothing above
    • But why can we see a lot of content?
    • Because when we request a static resource, it will executeJSJSWill request data and render what we want to see

React SSR

  • However, there are two problems in this process:

    • Problem 1: the first screen display speed is slow
    • Question 2: not conducive toSEOoptimization
  • How to solve this problem?

2. Recognize SSR

  • SSR(Server side rendering, server side rendering), which means that the completed HTML page structure has been generated on the server side and does not need to be parsed by the browser
  • Corresponding to CSR(Client side rendering), we usually rely on client-side rendering to develop spa pages
  • Early server-side rendering wrapped PHP, JSP, ASP and other methods, but under the current “front-end separation” development mode, front-end developers are unlikely to learn PHP, JSP and other technologies to develop web pages
  • But we can useNodeTo help us executeJavaScriptCode, complete the rendering of the page in advance

React SSR

3. Isomorphism

  • What is isomorphism?
  • A set of code can run on both the server and the client, which is isomorphic application;
  • Isomorphism is a form of SSR and a phenotypic form of present SSR;
  • When the user sends a request, first render the content of the home page through SSR on the server;
  • However, the corresponding code can also be executed on the client;
  • The purpose of execution includes event binding and other page switching, which can also be rendered on the client;
  • Expect to get it on the serverhtmlPage and send the request, and then the result will be directly responded to the client
It was previously executed by the browser - "" is now completed by node.js
    index.html
    1. Request JS file
    2. Execute JS file
    3. Ajax request
    4. Continue to execute JS to traverse the data and generate HTML structure

Next.js

1. Use react SSR

  • There are two main ways to use react SSR:

    • Method 1: manually build aSSRFramework;
    • Mode 2: use matureSSRFrame:Next.js
  • installNext.jsScaffold for frame:

    • npm install -g create-next-app
  • establishNext.jsproject

    • create-next-app next-demo
  • package.jsonFile ↓

React SSR

2. Display of home page

  • Next.jsBy default, the routing mapping relationship has been configured for us:
  • Mapping relationship between path and component;
  • This mapping relationship is inpagesThe corresponding path will be automatically generated for all components configured in the;
  • defaultpage/index.jsIs the default path to the page:

React SSR

3. About page and page Jump

  • Define about page

React SSR

  • Jump from home page to about page

React SSR

4. Layout component

  • We found that home and about are two independent components:

    • If they have some public content: for example, the head and tail are the same, does it need to be written everywhere?
  • There are two solutions:

    • Scheme 1: customize a layout component and put public content into layout;
    • Scheme 2: in_ Write the content of the public part in the app;

React SSR

5. Next.js supports various styles

  • Method 1: global style import
  • Mode 2:module.css
  • Mode 3: default integrationstyled-jsx
<style>{`
  p {
    color: #f879c6;
  }

`}</style>
  • Mode 4: otherscss in jsSolutions, such asstyled-components

    • Problems of styled components rendering on the next server:

      • Component usedstyled-componentsThere is no problem with the display, which is rendered on the client, but as long as we refresh manually,classNameThis is because the rendering on the server side is different from that on the client sideclassNameMismatch
    • How to solve: introduce related dependencies, create and edit.babelrcfile
    • yarn add styled-components
    • yarn add -D babel-plugin-styled-components
    • edit.babelrcfile
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["styled-components"]
  ]
}

6. Supplement of routing

  • Nesting of routes (sub routes):

    • The nesting of folders can finally form a sub route;
  • Routing parameters:

    • Parameters cannot be passed through / user /: ID in next.js;
    • Parameters can only be passed by / user? Id = 123
  • There are two ways to pass parameters:

    • Path in link
    • Router.push( pathname,query )
<Link href={`/recommend?id=${item}`} key={item}>
  <a>Recommended data {item}</a>
</Link>

import Router from 'next/router'
const itemClick = (item) => {
  Router.push({
    pathname: 'recommend',
    query: {
      id: item
    }
  })
}

7. Data request

  • getInitialProps
//Returns a promise object or a return object
Home.getInitialProps = async (props) => {
  const res = await axios({ url: 'http://39.102.36.212:3000/banner' })

  return {
    name: 'why',
    banners: res.data.banner,
    recommends: res.data.recommend.list,
  }
}

Recommended Today

On the mutation mechanism of Clickhouse (with source code analysis)

Recently studied a bit of CH code.I found an interesting word, mutation.The word Google has the meaning of mutation, but more relevant articles translate this as “revision”. The previous article analyzed background_ pool_ Size parameter.This parameter is related to the background asynchronous worker pool merge.The asynchronous merge and mutation work in Clickhouse kernel is completed […]