【前端专场 学习资料三】第五届字节跳动青训营

语言: CN / TW / HK

第五届字节跳动青训营讲师非常用心给大家整理了课前、中、后的学习内容,同学们自我评估,选择性查漏补缺,便于大家更好的跟上讲师们的节奏,祝大家学习愉快,多多提问交流~

课程一:Node.js 与前端开发实战

概述

本节课程主要分为四个方面:

  1. 介绍 Node.js 的应用场景
  2. 介绍 Node.js 运行时结构
  3. 如何用编写 Http Server
  4. 延伸话题

课前

安装 Node.js。可以选择以下一种方式:

  1. 从 Node.js 官网安装 https://nodejs.org/en/

  2. Mac, Linux 环境可以使用 nvm 进行安装 https://github.com/nvm-sh/nvm

    1. NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node nvm install 16

课后

  • 了解并尝试使用更多 Node.js 的原生模块 https://nodejs.org/dist/latest-v18.x/docs/api/
  • 学习在 npm 上搜索并安装模块 https://www.npmjs.com/

课程二:Next.js 实战项目

概述

本节课程主要分为五个方面:

  1. CSR, SSR, SSG
  2. 什么是 Next.js
  3. Next.js 客户端开发
  4. Next.js 服务端开发
  5. 项目核心功能讲解

课前部分主要罗列课程中涉及到的概念。对于不熟悉的概念,同学们可以提前查询预习;课中部分主要罗列一些课程需要使用的 Demo 仓库,帮助同学们跟上课程的进度;课后部分是一些问题,帮助同学们在课后梳理本课程的重点。

课前

  • CDN
  • BFF
  • SSR
  • CSR
  • SSG
  • SEO
  • TDK
  • CSS Modules
  • 跨域
  • CMS

课中

  • SSR 实现: https://github.com/czm1290433700/ssr-server
  • CMS 仓库地址:https://github.com/czm1290433700/nextjs-cms
  • Demo 仓库地址: https://github.com/czm1290433700/nextjs-demo

课后

  • 什么是 CSR, SSR 和 SSG?常规的 SSR 与 同构 SSR 之间有什么不同?
  • 一个 SSR 框架的实现要有哪些必须的元素?
  • 为什么我们需要使用 nextjs,它能帮我们解决什么问题?
  • getInitialProps、getServerSideProps、getStaticProps 三者有什么异同?
  • Nextjs 的 路由机制是怎样的?
  • CMS 是什么?在实际的业务项目中,我们为什么需要它?
  • Strapi 怎么配置发布一个接口?有哪些步骤?
  • 对于多个主题的效果,我们可以通过什么渠道实现?