import {GetServerSideProps, NextPage} from 'next';
import UAParser from 'ua-parser-js';
type Props = {
  browser: {
    name:string,
    version:string,
    major:string
  }
}
const index:NextPage<Props>=(props) =>{
  const {browser} = props
  return (
    <div>
      <h1>你的浏览器是 {browser.name}</h1>
    </div>
  )
}
export default index
export const getServerSideProps:GetServerSideProps = async (context)=>{
  const ua = context.req.headers['user-agent']
  const result = new UAParser(ua).getResult()
  return {
    props:{
      browser: result.browser
    }
  }
}

怎么证明这个页面是服务端渲染的：

看这个页面的源代码

页面内容是服务端之前返回的。

getServerSideProps

运行时机：

• 无论是开发环境还是生产环境
• 都是在每次请求到来之后运行getServerSideProps

对比getStaticPros

• 开发环境，每次请求到来后运行，方便开发
• 生产环境，build时运行一次。

参数

• context, 类型为 NextPageContext
• context.req / context.res 可以获取请求和响应
• 一般只需要用到context.req

总结

静态内容：直接输出HTML

动态内容：客户端渲染，通过AJAX请求，渲染成HTML

动态内容静态化：SSG，通过getStaticProps获取用户无关内容

用户相关动态内容静态化：

SSR,通过getServerSideProps获取请求

缺点：无法获取客户端信息，如浏览器窗口大小。