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


Next.js & SSR & CSR & SG的更多相关文章

  1. Node.js & SSR

    Node.js & SSR nest.js https://github.com/nestjs/nest next.js 中文文档 https://nextjs.org/learn/ Grap ...

  2. Next.js SSR Tutorials

    Next.js SSR Tutorials https://codesandbox.io/s/nextjs-demo-h49zt cli $ npx create-next-app ssr-demo- ...

  3. Nuxt.js SSR Optimizing Tips

    Nuxt.js SSR Optimizing Tips 性能优化 FP 首次绘制时间 FCP 首次渲染时间 FMP 首屏渲染时间 FI refs https://vueschool.io/articl ...

  4. SSR & Next.js & Nuxt.js

    SSR & Next.js & Nuxt.js Server Side Rendering https://nextjs.org/ https://nuxtjs.org/ SSR &a ...

  5. 今天聊一聊nuxt.js(上)

    背景 近期在做内部系统的重构,从一线业务彻底的重构,经过充分的考虑我们准备把这个项目打造成前台业务的试验站,比如ssr和一些其他的前沿技术的探索,积累充分的经验后待合适的契机应用到C端的项目中. 既然 ...

  6. nuxt.js实战之开发环境配置

    一.创建项目 1.使用如下命令生成项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 2.进入到项目根目录下,使用np ...

  7. nuxt.js 注册全局组件

    plugins 属性配置 src: String (文件的路径) ssr: Boolean (默认为 true) 如果值为 false,该文件只会在客户端被打包引入. 根目录找到 nuxt.confi ...

  8. Nuxt.js打造旅游网站第3篇_登录页面的编写

    主要知识点: 1.使用vuex/store管理数据 2.登录注册逻辑 3.Nuxt的本地存储 1.登录页面 1.1登录页面布局 替换pages/user/login.vue的代码如下 <temp ...

  9. Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例

    一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...

随机推荐

  1. vue开发中的"骚操作"

    前言 在与同事协作开发的过程中,见识到了不少"骚操作".因为之前都没用过,所以我愿称之为"高级技巧"! Vue.extend 在交互过程中,有个需求就是点击图标 ...

  2. K8s 一、(1、容器基本概念 2、k8s基本概念 )

    1.容器基本概念 容器其实就是一种特殊的进程,容器是一个 '单进程'模型. Namespace :隔离 Namespace 技术实际上修改了应用进程看待整个计算机"视图",即它的& ...

  3. linux切割日志

    1.vim log.sh,将文件复制进去#!/bin/sh LOG_PATH=/home/tomcat/apache-tomcat-7.0.56/logs/ LOG_NAME=catalina.out ...

  4. ehCache 配置

    package com.jy.modules.cms; import java.io.Serializable; import net.sf.ehcache.Cache; import net.sf. ...

  5. Linux 配置永久辅助IP

    1.什么是辅助IP 辅助IP来源于Linux之中,Linux的系统网卡可以支持多IP的绑定,而辅助IP多用于解耦解决服务之间的兼容性问题,常见的应用场景有: 虚拟IP,高可用飘逸: 永久临时IP解耦使 ...

  6. 考研机试练习(KY2-KY10)

    KY2 成绩排序 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32M,其他语言64M 本题知识点: 排序 sort struct 题目描述 查找和排序 题目:输入任意(用户,成绩) ...

  7. docker 运用

    本文采用centos7,记录docker的简单运用方式 https://www.runoob.com/docker/docker-container-usage.html 1.安装odcker 2.启 ...

  8. python内置常量是什么?

    摘要:学习Python的过程中,我们会从变量常量开始学习,那么python内置的常量你知道吗? 一个新产品,想熟悉它,最好的办法就是查看说明书! 没错,Python也给我们准备了这样的说明书--Pyt ...

  9. UVA-12304 2D Geometry 110 in 1! (有关圆的基本操作)

    UVA-12304 2D Geometry 110 in 1! 该问题包含以下几个子问题 CircumscribedCircle x1 y1 x2 y2 x3 y3 : 三角形外接圆 Inscribe ...

  10. Java并发包源码学习系列:线程池ThreadPoolExecutor源码解析

    目录 ThreadPoolExecutor概述 线程池解决的优点 线程池处理流程 创建线程池 重要常量及字段 线程池的五种状态及转换 ThreadPoolExecutor构造参数及参数意义 Work类 ...