What is SSR? Why SSR?

SSR is the abbreviation of Sever-side Render, which means “Render on the Server”. There are probably a few different points of time to create an image:

  1. Server Side Render: When the backend receives the Request, it generates an HTML screen. If new data is needed, it needs to re-send the Request and generate a new screen. The backend Framework usually has an HTML Template mechanism that generates the action of the screen.
  2. Client Side Render: Render is performed on the front end, and the back end serves as the API layer for data provisioning. When new information is needed, the front end only needs to partially update the screen after sending the Request.
  3. Isomorphic: The website can consider both SSR and CSR. The introduction of Isomorphic has been sorted out before.

The earliest websites are carried out in SSR way, but each rerender will cause the burden of the back end to increase and make the user experience worse. However, later frameworks like React/Vue are based on CSR to let users experience, and achieve the advantages of separating the front and back ends. But CSR comes with several problems:

  1. Some CSR websites may result in incomplete pages obtained by crawlers, causing SEO problems
  2. The first loading screen is when the front end loads and there is a period of blank space

Therefore, Isomorphic, which can combine CSR and SSR, becomes a new solution. The SSRS mentioned below are all Isomorphic SSRS with both modes.

Next.js

“Next. Js is a Lightweight framework for static and server systems rendered applications.”

Next is a React based SSR solution. More details can be found on our website.

Start your first next.js project!

Method 1: Install it manually

According to the official instruction, it can be manually installed through NPM:

$ npm install --save next react react-dom
Copy the code

Then change the execution mode in package.json to NEXT:

{
  "scripts": {
    "dev": "next"."build": "next build"."start": "next start"}}Copy the code

Then create a page in /pages/index.js file:

exportdefault () => <div>Welcome to next.js! </div>Copy the code

Finally, the run command runs the project at 3000 PORT:

npm run dev
Copy the code

Method 2: create-next-app

React is a scaffold that many people use with create-react-app to bypass complex environment Settings.

$ npm install -g create-next-app

$ create-next-app my-app
$ cd my-app/
$ yarn start
Copy the code

Let’s look at a simple Isomorphic example

Add a new page

Next is assigned as a Route based on the /pages directory. For example, the index of /pages will correspond to the Root URL. Create a hello.js file in the /pages directory:

const Hello = (props) => (
    <div>
        <h1>Hello Next</h1>
    </div>
)

export default Hello
Copy the code

There will be a Route in /hello.

The two pages link to each other

Link Component is provided in Next to allow Client Side page swapping between pages:

import Link from 'next/link'

const Hello = (props) => (
    <div>
        <Link href={`/`}>
          <a>index</a>
        </Link>
        <Link href={`/hello`}>
          <a>hello</a>
        </Link>
    </div>
)

export default Hello
Copy the code

CSR and SSR judgment

We now have a page with links. We have mentioned that Next. Js is a framework that combines CSR and SSR. How does it deal with that? Let’s distinguish between two sources:

  • If you click Link directly, it is on the Client Side page change => CSR
  • To rearrange, or go to the screen for the first time, you must first send Request to the back end => SSR

Next does this by means of getInitialProps and by means of reQ before Render:

import Link from 'next/link'

const Hello = (props) => (
    <div>
        <h1>{props.text}</h1>
        <Link href={`/hello`}>
            <a>reload</a>
        </Link>
    </div>
)

Hello.getInitialProps = async function({req, query}) {
  if (req)
    return { text: 'hello server' }
  return { text: 'hello client'}}export default Hello
Copy the code

After this implementation, we can find:

  • If it’s SSR, it gets REQ at getInitialProps
  • If it’s CSR, you don’t get reQ in getInitialProps

Conclusion small

Next can elegantly solve the complex mechanism of Isomorphic for us, and achieve the solution with both SSR and CSR. Learn how to get started with a simple implementation, and consider importing new projects later if needed!

Reference

  1. Next.js
  2. create-next-app

License

This work is by Chang Wei-Yaun (V123582) and is distributed under an INNOVATIVE CC name – Share in the same way with 3.0 Unported license.