Next.js & SSR & CSR & SG

Next.js & SSR & CSR & SG

getStaticPaths, getStaticProps, getServerSideProps

getStaticProps (Static Generation): Fetch data at build time.

getStaticPaths (Static Generation): Specify dynamic routes to pre-render based on data.

getServerSideProps (Server-side Rendering): Fetch data on each request.

https://nextjs.org/docs/basic-features/data-fetching

React SSR

https://reactjs.org/docs/react-dom-server.html

1. support both server and browser environments

renderToString()
renderToStaticMarkup()

1. depend on a package (stream) & only support the server environment

renderToNodeStream()
renderToStaticNodeStream()

// ES modules
import ReactDOMServer from 'react-dom/server';

// CommonJS
var ReactDOMServer = require('react-dom/server');

如何支持 UMD 模块导入？看源码

https://www.cnblogs.com/xgqfrms/p/13728515.html

Next.js

https://nextjs.org/

routing system

An intuitive page-based routing system (with support for dynamic routes)

https://nextjs.org/docs/basic-features/pages

https://nextjs.org/docs/routing/dynamic-routes

SSR

Server Side Render

CSR

Client Side Render

SG

Static Generation

Site Generator

gatsby

https://www.gatsbyjs.org/

SSG

Static Site Generator

https://nextjs.org/docs/basic-features/pages#static-generation-recommended

GR ???

PR

pre-rendering

https://nextjs.org/docs/basic-features/pages#pre-rendering

demo

const log = console.log;

log(`Article page`)

// This function gets called at build time
// export async function getStaticPaths() {
//   // Call an external API endpoint to get posts
//   // const res = await fetch('https://.../posts')
//   // const posts = await res.json()
//   const routes = [
//     {
//       id: 1,
//     },
//     {
//       id: 2,
//     },
//     {
//       id: 3,
//     },
//   ];

//   const posts = await Promise.resolve(routes);

//   // Get the paths we want to pre-render based on posts
//   const paths = posts.map((post) => `/articles/${post.id}`);

//   log(`paths =`, paths)

//   // We'll pre-render only these paths at build time.
//   // { fallback: false } means other routes should 404.
//   return {
//     paths,
//     fallback: false,
//   };
// }

// This also gets called at build time
// export async function getStaticProps({ params }) {
//   log(`params = `, params)
//   //  { id: '2' }
//   // params contains the post `id`.
//   // If the route is like /posts/1, then params.id is 1
//   // const res = await fetch(`https://.../posts/${params.id}`)
//   // const articles = await res.json()
//   const blogs = [
//     {
//       title: "article 1",
//     },
//     {
//       title: "article 2",
//     },
//     {
//       title: "article 3",
//     },
//   ];
//   const articles = await Promise.resolve(blogs);

//   const {
//     id,
//   } = params;
//   // Pass post data to the page via props
//   log(`getStaticProps`, params)
//   return {
//     props: {
//       id,
//       article: articles[`${id - 1}`],
//     },
//   };
// }

const log = console.log;

log(`Article page`)

// This gets called on every request
export async function getServerSideProps({ params }) {
  log(`ServerSide params = `, params)
  // Fetch data from external API
  // const res = await fetch(`https://.../data`)
  // const data = await res.json()
  const blogs = [
    {
      title: "article 1",
    },
    {
      title: "article 2",
    },
    {
      title: "article 3",
    },
  ];
  const articles = await Promise.resolve(blogs);

  const {
    id,
  } = params;
  log(`getServerSideProps`, params)
  return {
    props: {
      id,
      article: articles[`${id - 1}`],
    },
  };
}

function Article(props) {
  log(`props = `, props)
  // log(`props.url`, props.url)
  // const {
  //   articles,
  // } = props;
  const {
    // url: {
    //   query: {
    //     id,
    //   },
    // },
    id,
    article,
  } = props;
  return (
    <div className="posts-box">
      <div className="posts-title">articles Page</div>
      <div>article id = {id}</div>
      <div>{JSON.stringify(article)}</div>
      <style jsx>{`
        .posts-box {
          min-height: 100vh;
          padding: 0 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      `}</style>
      <style jsx global>{`
        .posts-title {
         font-size: 23px;
         color: #f0f;
        }
      `}</style>
    </div>
  );
}

export default Article;

refs

https://www.cnblogs.com/xgqfrms/p/10720612.html

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---