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

support both server and browser environments

renderToString()

renderToStaticMarkup()

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 发布文章使用：只允许注册用户才可以访问！

巴特西

Next.js & SSR & CSR & SG

Next.js & SSR & CSR & SG

React SSR

Next.js

routing system

SSR

CSR

SG

SSG

GR ???

PR

demo

refs

xgqfrms 2012-2020

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

最新文章

热门文章

巴特西

Next.js & SSR & CSR & SG

Next.js & SSR & CSR & SG

React SSR

Next.js

routing system

SSR

CSR

SG

SSG

GR ???

PR

demo

refs

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

最新文章

热门文章

xgqfrms 2012-2020

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