Preliminary knowledge next New concepts such as isr/rsc/edge runtime/streaming in JS

Preface

Shallow peep nextjs So far v12 Several key new concepts of version , We have ：

Definition	explain
ISR	Incremental static rendering
Edge Runtime	Edge runtime
Streaming SSR	Streaming SSR
React Server Components	Server component

Let's have a preliminary understanding of these new concepts , Before reading , We assume that the reader is ready nextjs Basic knowledge of .

Meaning cognition

ISR

SSR、SSG These two are cold rice , We're all familiar with , The so-called ISR The concept of incremental re rendering , It's based on SSG A hybrid version of the scene SSR , It can also be understood as an enhanced version SSG .

Two kinds of SSG

about SSG Come on , We should also be pure SSG And with a server SSG .

pure SSG （ next export ） Pre rendering at build time html How to export pure static files , stay v circle nuxt 2 Has been widely used .

And consider having an infinite number of pages （ Such as e-commerce commodities ） Website , Also want to enjoy SSG What should I do ？ So we introduced the server , Respond to access through the server , On demand SSG Generate new pages and cache , To deal with unlimited pages . The concept of nextjs Middle is gSP（ getStaticProps ） > fallback , In Africa fallback: false Play a role in the scene .

ISR = SSG + SSR ?

We are based on the second type with server SSG Consider further , because SSG Once executed, a cache is generated , At this point, the problem becomes that I want to invalidate my cache , Otherwise, every time it is the oldest SSG Home page data is embarrassing .

This produces The incremental The concept of , The branch appears again , Whether to invalidate the cache passively or actively ？

1. passive ： There are already functions , Open the box , That is to say gSP > revalidate .

2. Take the initiative ： Experimental function , See On-demand Revalidation (Beta) , By visiting API Routes To designate path Page cache of is invalid （ For example, commodity information modification , The cache of the product page needs to be invalidated immediately ）.

Through the above considerations , We also gradually find that ISR Like a band SSR Element's SSG .

and Vercel Facility relevance

nextjs stay Self-hosting ISR It is also specially reminded that we are k8s many pod In the scene of , Each instance has its own file system to cache SSG The page of , This may result in some instances of unallocated traffic , Lead to fallback blocking Poor experience for too long , So you may need to share and mount a file system or partition to solve .

So that's where it comes in Vercel The relevance of capital construction ：Vercel Incremental Static Regeneration

stay Vercel Internal meeting right ISR Better global cache support , Interested readers can explore by themselves , There is no further development here .

To sum up ,ISR The universality and privatization of is feasible , Because in Vercel There is no fatal element on the strongly correlated part , Only performance exists 、 Experience 、 Waste of cost, etc .

Edge Runtime

The edge runtime described here will nextjs Middleware Run on smaller runtime A behavior in , For faster response , See ：

• RFC: Switchable Next.js Runtime

This article compares the three most popular providers ：nodejs、lambda（ Such as AWS）、edge Advantages and disadvantages ,Middleware At present, it is Beta Experimental function , But his setting made nextjs More expansion of the whole stack , such as Auth Pre check of , We will not describe more here , Please be there. RFC Learn more about .

React 18 Scene interleaving

stay RSC（ React Server Components ） in , We need to specify edge runtime Mandatory react 18 streaming render, Otherwise, it will be automatically and statically optimized , This is a workaround .

Streaming SSR

ad locum streaming render Is based on react 18 Suspense Speaking of ,Suspense Components under will be streaming Streaming rendering , Make it smaller , Faster response 、 Rendering speed , Better experience .

It is worth mentioning that, as in the past Suspense Cognitive differences .

Former Suspense cognition

In the past experiment At this stage, we use <Suspense /> + React.lazy() + webpack lazyimport To unpack ：

import React, {
     Suspense, lazy } from 'react'

const Component = lazy(() => import('./Component'))

function Page() {
    
  return (
    <Suspense fallback={
    <LoadingElement />}>
      <Component />
    <Suspense/>
  )
}

In this way webpack Will cooperate with us to lazyimport Of ./Component Of .js The product is removed and loaded on demand , and React Suspense It will cooperate with us when the loading is not completed fallback Show loading status .

new Suspense cognition

And in the react 18 in Suspense After being formalized , Our focus is on how to use Suspense It brings streaming render Optimize the application experience , stay http We already know in the foundation streaming transport The advantages of , That combination react To put it into practice is nextjs The focus of empowerment , This leads to faster Suspense Component response speed , And selective hydration according to user interaction priority （ For example, priority transmission is interacting hover The components of ）.

Cognition in practice

Back to practice , What we need to realize is , There are three kinds of Suspense The way will be in streaming It's opened in ：

import dynamic from 'next/dynamic'
import {
     lazy, Suspense } from 'react'

import Content from '../components/content'

// These two ways are identical:
const Profile = dynamic(() => import('./profile'), {
     suspense: true })
const Footer = lazy(() => import('./footer'))

export default function Home() {
    
  return (
    <div>
      <Suspense fallback={
    <Spinner />}>
        {
    /* A component that uses Suspense */}
        <Content />
      </Suspense>
      <Suspense fallback={
    <Spinner />}>
        <Profile />
      </Suspense>
      <Suspense fallback={
    <Spinner />}>
        <Footer />
      </Suspense>
    </div>
  )
}

Here it is with webpack lazyimport There is no such strong cooperation , Even if it's sync synchronous , Will also be streaming . So in react 18 SSR You should use as much as possible in your scenarios Suspense .

notes ：

1. Certain preconditions must be followed before the above contents are used , as well as nextjs Yes streaming Our support has reached a mature stage .

2. About streaming More about , You can Official documents Read more .

RSC（React Server Components）

about RSC Come on , Although there has been a long discussion so far , But they are often limited to A very shallow theoretical level , Not even corresponding code Statement of the . To nextjs In practice , At present RSC There are many limitations in the implementation , Callable api There are only a few, not even , It's still just demo Stage .

RSC The cognitive

So we're right RSC The cognition of is a ： Be able to undertake expensive computing on the server side 、 Utilize the component provider of the server-side environment .

• Server computing ： There is no additional novelty to this point , The ultimate goal is to improve performance and experience .

• Server environment ： This means that nodejs Of api call , authentication 、 Set the operation security logic first .

Thanks to the react 18 Of streaming Transmission characteristics ,RSC It has unique advantages in the transmission of large volume components , That is to make some heavy dependencies RSC Streaming improves performance and experience .

React The team side plans to react 18 One of the minor The stage begins to push forward the formal RSC , Because the industry discussion is very mixed , This article will not expand here , We look forward to new react The blueprint .

About nextjs stay RSC Existing practices have been put into practice demo, You can check out ：

• vercel/next-react-server-components

summary

In this paper , except ISR They are all relatively new experiment function , We did “ A superficial taste of cognition ” .

Following react hooks Progenitor job hopping vercel after , Gradually came vercel nextjs What do you do ,react Just match the trend , future nextjs Everything will also become an influence react An important part of development .