Next.js Static data generation and server-side rendering

React Although easy to use , But what has been criticized is ：SEO optimization problem .Vercel The team is building Next.js I took this problem into account when I was , And provides two SEO Friendly handling , One of them is to use getStaticProps This method .

Take some of the things I wrote before React Small demo For example , Press down f12 Make changes to the page inspect When , Is to be able to see all the code ：

However, this is already the case when the client completes rendering , If direct inspect Page source code (chrome Shortcut key ctrl + u), Then you can see ：

The page is empty , The remarks are also intimate instructions , If you open this page in a browser , Then you will see an empty page . In this case , Reptiles 、 The robot can't capture the information of the page correctly ,SEO There is no way to talk about .

getStaticProps

How to use getStaticProps

Use getStaticProps Can solve this problem , The reference codes are as follows ：

import React from "react";
import EventList from "../components/events/event-list";
//  This is  util  function , Responsible for getting data , It can be from local  json  Get or get from   database   In order to get 
import {
     getFeaturedEvents } from "../helpers/api-util";

const HomePage = ({
      featuredEvents }) => {
    
  return (
    <div>
      <EventList items={
    featuredEvents} />
    </div>
  );
};

export async function getStaticProps(context) {
    
  const featuredEvents = await getFeaturedEvents();

  return {
    
    props: {
    
      featuredEvents: featuredEvents,
    },
    revalidate: 1800,
  };
}

export default HomePage;

The rendering effect is as follows ：

The source code of the page is as follows ：

The source code is Next.js Directly pack and compress , So it looks messy , But you can also see , The data on the page is truly reflected in the source code , And when robots / When a crawler crawls a page , You can also grab the following keywords ：

• event
• extroverts
• introverts
• Relevant location
• Related events

For users , When they search for the above keywords in the search engine , It is possible to browse to the generated web page .

Notice this code ：revalidate: 1800, although getStaticProps It's a page built when packaging , however Next.js Itself is through node Implemented the server , Therefore, it can also be rebuilt after the deployment goes online (rebuild) page , This is the time Next.js Will check getStaticProps If there revalidate This return value .

Some words Next.js The static rendered page will be regenerated after the specified time , And return the latest page to the user . If you use Next.js Build a blog system , On the front page revalidate It can be set to 1 God ( namely 86400s, That is to say revalidate: 86400), After all, under normal circumstances, the most blogs are still day shift .

In this case , The project will be restarted regularly every day build, Reptiles / Robots can also catch the latest pages .

When to use getStaticProps

Next.js The following situations mentioned in the official documents of will be more suitable for use getStaticProps：

• The data required to render the page is available at build time ahead of a user’s request

  Page data before user access 、 pack (build) It already exists

• The data comes from a headless CMS

  The data comes from headless content management systems (CMS - Content Management System)

  headless It means separating the front end from the back end , The obtained content can run on a variety of platforms .

• The data can be publicly cached (not user-specific)

  Information is not user specific , The cache can be exposed . There is no important information , For example, token such .

• The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance

  Page requirements must be SEO friendly , And the construction speed is very fast . adopt getStaticProps Built HTML and JSON All the documents are available through CDN Caching improves performance .

getStaticProps The elapsed time

• getStaticProps always runs during next build

  Every time build when

• getStaticProps runs in the background when using revalidate

  When revalidate time out

• getStaticProps runs on-demand in the background when using unstable_revalidate

  When using unstable_revalidate when ,unstable_revalidate Is still in the beta period , I should wait until this feature is officially released before going to see unstable_revalidate Specific functions

getServerSideProps

except getStaticProps outside ,Next.js The team also provides another way to get data dynamically , That's using getServerSideProps. And getStaticProps comparison ,getServerSideProps A new page will be generated and returned to the user every time the user visits , That is, the true sense of server-side rendering (server side rendering).

Its usage and getStaticProps be similar , No, revalidate attribute , The code looks like this ：

export async function getServerSideProps(context) {
    
  return {
    
    props: {
    }, // will be passed to the page component as props
  };
}

getStaticProps in context Not many parameters , however getServerSideProps Contains some parameters on the server side , Such as ：

• params
• req
• res
• query
• …

because getStaticProps and getServerSideProps Your code will not be exposed to the front end , So you can add some pairs here header, req/res Something like that .

More of this part belongs to node.js The category of part , I won't go into details here .