2024前端开发 - 重点专题01 - Astro框架介绍

学习系列目录

• 2024前端开发 - 1/3入门篇 - 基础概念学习
  • 2024入门篇 - 基础概念01 - 一条命令的执行过程和PATH的配置
  • 2024入门篇 - 基础概念02 - 前端开发常见命令和环境安装配置
• 2024前端开发 - 2/3进阶篇 - 核心框架学习
• 2024前端开发 - 3/3进阶篇 - 重点专题学习
  • 2024前端开发 - 重点专题01 - Astro框架介绍

热门话题系列

• 2023年全球Web开发概况
• 2024年的七大前端Web开发趋势

热门模版系列

• AstroPaper博客
• AdminOne后台
• 工程师个人简历

---

本文是一些前端开发中的热点主题，包括概念介绍，发展趋势，适用场景，优缺点以及一些学习资源。

静态站点生成(SSG)、服务器端渲染(SSR)与客户端渲染(CSR)

• 概念介绍：

  • 静态站点生成(SSG)：在构建过程中生成所有页面，一次请求即可获取全部内容，如Gatsby。
  • 服务器端渲染(SSR)：在服务器端生成HTML，然后发送给客户端，如Next.js。
  • 客户端渲染(CSR)：所有内容均在客户端生成，如Create React App。

• 发展趋势：目前，越来越多的前端应用开始使用SSG和SSR技术来改善SEO和首屏加载时间。

• 适用场景：SSG适合内容固定，更新不频繁的应用；SSR适合SEO要求高，需要快速首屏渲染的应用；CSR适合交互复杂，状态丰富的单页应用。

• 优缺点：

  • SSG：优点是SEO友好，首屏加载快，托管简单；缺点是预构建时间可能会很长，不适合频繁更新的应用。
  • SSR：优点是SEO友好，首屏加载快；缺点是服务器压力大，开发复杂。
  • CSR：优点是用户体验好，开发简单；缺点是首屏加载慢，SEO不友好。

• 学习的Git仓库：Gatsby, Next.js, Create React App

// 一个基本的Next.js SSR示例
import React from 'react'
import fetch from 'isomorphic-unfetch'

const Index = ({
    
     stars }) =>
  <div>
    Next stars: {
   
   stars}
  </div>

Index.getInitialProps = async ({
    
     req }) => {
   
   
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return {