Know the SSR

1. Why SSR?

  • Limitations of rich single-page applications:
    • The application we developed earlier, if you could right click and look directly at the source code, you could see almost nothing on it
    • But why do we see so much content?
    • Because static resources are executed when we request themJS.JSWill request the data and render what we want to see

  • But there are two problems with this process:

    • Problem 1: The first screen display speed is slow
    • Problem two: not goodSEOTo optimize the

  • How to solve this problem?

    • Use server-side rendering

2. Know the SSR

  • SSR (Server Side Rendering) refers to the completed HTML page structure that has been generated on the Server Side and does not require browser parsing
  • 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 ways, but in the current “front and back end separation” development mode, front-end developers are unlikely to learn PHP, JSP and other technologies to develop web pages
  • But we can helpNodeTo help us executeJavaScriptCode to complete the page rendering in advance

3. The homogeneous

  • What is isomorphism?

  • A set of code can run on both the server side and the client side, which is a homogeneous application;

  • Isomorphism is a form of SSR and a phenotypic form of present SSR.

  • When the user makes a request, first render the content of the home page through SSR in the server;

  • But the corresponding code can also be executed on the client side;

  • Execution purposes including event binding and other page switches can also be rendered on the client side;

  • Expect the server to fetch the HTML page and send the request, and the result will be sent directly back to the client

Index.html 1 is done by Node.js, which was previously executed by the browser. Request JS file 2. Execute JS file 3. Ajax request 4. Continue to execute JS to traverse data and generate HTML structureCopy the code

Next.js

1. Use React SSR

  • There are two main ways to use React SSR:
    • Method 1: Manually build oneSSRFramework;
    • Method two: Use a mature oneSSRFramework:Next.js
  • The installationNext.jsScaffolding for frames:
    • npm install -g create-next-app
  • createNext.jsproject
    • create-next-app next-demo
  • package.jsonFile left

2. Display of the home page

  • By default, next.js has configured the route mapping for us:

  • Mapping between paths and components;

  • This mapping relationship is that when configuring related components in Pages, the corresponding path will be generated automatically.

  • The default page/index.js is the default path to the page:

3. About pages and page jumps

  • Define the About page

  • Jump to the About page from the Home page

4. The Layout component

  • We found that home and About are two independent components:
    • If they have something common: the head and tail are the same, do they need to write everything?
  • There are two solutions:
    • Plan 1: Customize a Layout component and put common content in Layout;
    • Plan 2: write the contents of the common part in _app;

5. Next-js supports a variety of styles

  • Mode 1: Global style introduction
  • Method 2:module.css
  • Mode 3: Default integrationstyled-jsx
<style>{` p { color: #f879c6; } `}</style>
Copy the code

  • Style 4: Other CSS in JS schemes, such as Styled – Components

    • Styled – Components problems rendered on the Next server:

      • The component usesstyled-componentsThe display is fine, it’s rendered on the client side, but as long as we manually refresh,classNameIt is not matched because it is rendered on the server side and rendered on the client sideclassNameDon’t match

    • How to resolve: importing dependencies, creating and editing.babelrc files

    • yarn add styled-components

    • yarn add -D babel-plugin-styled-components

    • Edit the.babelrc file

{
  "presets": [
    "next/babel"]."plugins": [["styled-components"]]}Copy the code

6. Route supplement

  • Nesting of routes (child routing) :
    • Folder nesting, finally can form a child route;
  • Route parameters:
    • /user/:id cannot be passed in Next.
    • Can only pass /user? Pass the parameter id=123
  • There are two ways to pass parameters:
    • Paths 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
    }
  })
}
Copy the code

7. Data request

  • getInitialProps
// Return a Promise object or return an 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,
  }
}
Copy the code