⚠️温馨提示：文档中包含【1个】暂不支持的区域，请通过搜索关键字【暂不支持的文档区域】进行后续处理

课程源码与笔记，可以找咨询老师领取~~~

ssr-notes.zip

很多同学可能第一次来，我分享了很多干货公开课，希望对你的技术成长有帮助！免费分享都在这里，需要 文档和配套视频找咨询老师 领取~

【飞书文档】备战金九银十，进阶大前端，涨薪全突破！跳槽涨薪需求同学必看

【飞书文档】项目没有难点亮点？字节大佬带你前端项目弯道超车

【飞书文档】字节大佬带你弯道超车，深入剖析大厂面试真题~

【飞书文档】面试被算法干吐了？字节大佬带你突破极限，冲击 30K+ 必掌握算法与 WebAssembly 技术冲刺年包 50W+ 同学必看

【飞书文档】高级前端专家如何做性能优化？特邀字节大佬细数飞书应用优化细节【超详细内培版】

【飞书文档】高级前端专家如何做项目架构与工程化设计？特邀字节大佬细数字节开源项目架构细节【超详细内培版】

【飞书文档】小小微前端，轻松拿捏，特邀字节大佬开讲微前端架构与源码剖析【内部培训版】 35K+ 同学必看

【飞书文档】高级前端专家如何做性能优化？特邀字节大佬细数飞书应用优化细节（二）【内部培训版】

【飞书文档】前端破局 AI 应用开发，特邀字节大佬分享字节系 AI 场景落地应用与 AI 引擎编排流程探索前端新方向同学福音

【飞书文档】React18 源码深度剖析，字节面试官教你轻松拿捏高级前端专家面试框架原理题

【飞书文档】Vue3 源码深度剖析，字节面试官教你轻松拿捏高级前端专家面试框架原理题

【飞书文档】Vite 构建过程与源码深度剖析，你怎么也想不到一线大厂工程化构建面试会问这么深！

【飞书文档】脚手架/CLI 工具原理与开发实践，特邀字节前端专家带你体悟大厂团队基建与研发工作流团队基建必看

【飞书文档】Webpack 原理深度解读与面试专项突击，字节面试官带你手撕难缠打包构建面试原理题工程化与构建原理深入

【飞书文档】冲击中大厂筹备与涨薪突击最优方案，特邀字节面试官带你体验大厂面试全流程

【飞书文档】字节面试专场——中厂在职学员冲击大厂 30K+，看看面试官如何评价大厂模拟面试，问得很深慎看

【飞书文档】前端性能与异常监控平台全链路设计与实践，字节架构师：掌握这整套拿个 40K+ 不在话下吧

【飞书文档】飞书文档协同编辑器技术揭秘，特邀字节架构师分享富文本编辑器方案细节

【飞书文档】大数据可视化引擎与数字孪生平台设计浅析，字节架构师：一起来剖析 DataWind 数据洞察平台架构之道

服务端渲染
前后端同构
SSR、SSG 与 RSC 原理

【 初中级 】谈谈你对服务端渲染的理解，之前工作中有没有实践过？
【 中高级 】有了解过服务端渲染框架吗，请简单说说核心概念？
【 专家级 】如果让你从零到一架构实现一个 SSR 框架，请简要说说你的设计思路

【初中级】谈谈你对服务端渲染的理解，之前工作中有没有实践过？

服务端渲染（SSR）概述

服务端渲染（Server-Side Rendering，SSR） ：在服务器端将网页内容渲染为完整的 HTML，然后发送到客户端浏览器进行显示。

客户端渲染（Client-Side Rendering，CSR） ：在浏览器端通过 JavaScript 动态生成页面内容。

图示：

SSR:
Server --> Rendered HTML --> Browser

CSR:
Server --> Empty HTML + JS --> Browser executes JS --> Rendered HTML

SSR 与 CSR 的区别

特点	SSR	CSR
渲染时机	服务器端生成完整 HTML，浏览器直接渲染	浏览器先加载空壳 HTML，通过 JavaScript 填充内容
首屏速度	较快，用户可快速看到内容	较慢，需要下载和执行 JavaScript
SEO 友好性	高，搜索引擎可直接抓取完整内容	低，部分搜索引擎可能无法执行 JavaScript

SSR 的优势与挑战

优势

提高首屏渲染速度 ：
- 用户无需等待 JavaScript 加载和执行即可看到完整内容，显著提升用户体验。
SEO 优化 ：
- 搜索引擎可以直接抓取完整的 HTML 内容，有助于提高网站在搜索结果中的排名。
共享链接时显示预览 ：
- 在社交媒体上分享链接时，能够正确显示页面预览信息，增加内容的传播性。

挑战

开发复杂度增加 ：
- 需要处理服务器端渲染逻辑，涉及 Node.js 等后端技术，与前端开发结合更加复杂。
服务器压力增大 ：
- 服务器需要承担渲染页面的工作，可能导致性能瓶颈，尤其是在高并发场景下。
状态管理复杂 ：
- 需要在服务器和客户端之间同步状态，确保数据一致性，避免因状态不同步导致的错误。

SSR 在实际工作中的应用

项目案例介绍

项目名称 ：电商平台（示例）
技术栈 ：React + Next.js
需求：
- 高效的首屏渲染，提升用户体验。
- 优化 SEO，增加流量。
- 支持社交媒体分享，展示商品预览。

实施步骤

选择 SSR 框架 ：
- 选用 Next.js 作为 SSR 框架，因其基于 React，易于集成和扩展。
配置服务器环境 ：
- 部署 Node.js 服务器，配置 SSR 环境。
- 使用 Vercel 或自建服务器进行部署。
开发过程中结合 SSR 特性优化页面渲染 ：
- 利用 getServerSideProps 获取数据，预渲染页面。
- 使用动态路由和静态站点生成（SSG）相结合，优化不同页面的渲染策略。

遇到的问题与解决方案

服务器性能优化 ：
- 问题：高并发下服务器响应速度慢。
- 解决方案 ：使用缓存策略（如 Redis 缓存）、负载均衡、多实例部署等方法提升服务器性能。
状态同步与数据预取策略 ：
- 问题：服务器与客户端状态不一致，导致页面显示错误。
- 解决方案 ：使用状态管理工具（如 Redux、Zustand）在服务器渲染时注入初始状态，确保客户端接管时状态一致。

【中高级】有了解过服务端渲染框架吗，请简单说说核心概念？

服务端渲染框架概述

常见的 SSR 框架

Next.js ：
- 基于 React 的开源框架，支持 SSR 和静态站点生成（SSG）。
- 提供文件系统路由、自动代码分割、API 路由等功能，简化开发流程。
Remix ：
- 现代化的 SSR 框架，专注于用户体验和开发者体验。
- 强调数据加载、错误处理和路由管理的最佳实践。
Nuxt.js ：
- 基于 Vue.js 的 SSR 框架，类似于 Next.js，为 Vue 应用提供 SSR 支持。
- 支持静态站点生成、模块化配置和丰富的插件生态。

Next.js 核心概念

页面与路由

基于文件系统的路由 ：
- pages/index.js 对应 /
- pages/about.js 对应 /about
- 动态路由如 pages/blog/[id].js 对应 /blog/:id
示例：

// pages/blog/[id].js
import { useRouter } from 'next/router';

const BlogPost = ({ post }) => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default BlogPost;

数据获取方法

getStaticProps（静态生成） ：
- 在构建时获取数据，适用于不经常变化的页面。
- 提高页面加载速度，减少服务器负担。
getServerSideProps（服务器端渲染） ：
- 每次请求时获取数据，适用于需要实时数据的页面。
- 确保数据的实时性，但可能增加服务器负担。
示例：

// pages/posts.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 10, // 10秒后重新生成页面
  };
}

const Posts = ({ posts }) => (
  <div>
    <h1>博客文章</h1>
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  </div>
);

export default Posts;

客户端激活（Hydration）

过程：
1. 客户端接收到服务器渲染的 HTML。
2. 通过 React 将其转换为可交互的应用。
3. 绑定事件处理器，确保页面功能正常。
示例：

// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // 客户端特定的逻辑
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

中间件与插件

中间件（Middleware） ：
- 在请求处理链中执行的函数，用于权限校验、日志记录等。
- 可以在 middleware.js 文件中定义。
插件（Plugins） ：
- 扩展框架功能，如集成第三方库（Axios、styled-components）。
- 通过 npm 包或自定义代码实现。
示例：

// middleware/auth.js
export function authMiddleware(req, res, next) {
  if (!req.user) {
    res.redirect('/login');
  } else {
    next();
  }
}

// lib/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
});

export default instance;

// pages/posts.js
import axios from '../lib/axios';

export async function getServerSideProps() {
  const res = await axios.get('/posts');
  const posts = res.data;

  return {
    props: {
      posts,
    },
  };
}

const Posts = ({ posts }) => (
  <div>
    <h1>博客文章</h1>
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  </div>
);

export default Posts;

核心特性解析

静态站点生成（SSG）

定义：
- 在构建时预渲染页面，生成静态 HTML 文件。
- 适用于内容不经常变化的页面，如博客、文档等。
优势：
- 提高页面加载速度，减少服务器负担。
- 可以通过 CDN 分发静态内容，提升访问速度。
示例：

// pages/about.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/about');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 60, // 60秒后重新生成页面
  };
}

const About = ({ data }) => (
  <div>
    <h1>关于我们</h1>
    <p>{data.description}</p>
  </div>
);

export default About;

代码拆分

定义：
- 自动将代码拆分为更小的块，按需加载，优化加载性能。
优势：
- 减少初始加载时间，提高页面响应速度。
- 通过懒加载不常用的组件，提升用户体验。
示例：

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'), {
  loading: () => <p>加载中...</p>,
});

const Home = () => (
  <div>
    <h1>首页</h1>
    <DynamicComponent />
  </div>
);

export default Home;

API 路由

定义：
- 内置 API 路由功能，支持构建后端服务，处理数据请求。
优势：
- 无需单独搭建后端服务器，简化开发流程。
- 与前端代码无缝集成，提升开发效率。
示例：

// pages/api/posts.js
export default function handler(req, res) {
  const posts = [
    { id: 1, title: '第一篇文章' },
    { id: 2, title: '第二篇文章' },
  ];

  res.status(200).json(posts);
}

Next.js 的开发与部署

项目结构

my-next-app/
├── pages/             // 页面组件，Next.js 根据此目录生成路由
│   ├── index.js       // 对应 / 路径
│   ├── about.js       // 对应 /about
│   ├── blog/
│   │   └── [id].js    // 动态路由 /blog/:id
│   └── api/
│       └── posts.js   // API 路由
├── public/            // 静态文件，直接映射到应用的根路径
├── styles/            // 样式文件
├── components/        // 可复用的 React 组件
├── lib/               // 库文件，如 Axios 实例
├── next.config.js     // Next.js 配置文件
├── package.json
└── ...

......

示例代码详解

创建 Next.js 项目

npx create-next-app my-next-app

定义页面与布局

// pages/index.js
import Layout from '../components/Layout';

const Home = () => (
  <Layout>
    <h1>首页</h1>
    <p>欢迎来到我的网站！</p>
  </Layout>
);

export default Home;

// components/Layout.js
import Link from 'next/link';

const Layout = ({ children }) => (
  <div>
    <nav>
      <Link href="/">首页</Link>
      <Link href="/about">关于</Link>
    </nav>
    <main>{children}</main>
    <footer>© 2024 My Website</footer>
  </div>
);

export default Layout;

数据获取示例

// pages/posts.js
import axios from '../lib/axios';

export async function getServerSideProps() {
  const res = await axios.get('/posts');
  const posts = res.data;

  return {
    props: {
      posts,
    },
  };
}

const Posts = ({ posts }) => (
  <div>
    <h1>博客文章</h1>
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  </div>
);

export default Posts;

【专家级】如果让你从零到一架构实现一个 SSR 框架，请简要说说你的设计思路

设计目标与核心需求

设计目标

高性能 ：
- 提供高效的渲染能力，确保低延迟响应，支持高并发。
可扩展性 ：
- 模块化设计，允许通过插件扩展功能，满足不同项目需求。
易用性 ：
- 提供简洁的 API，友好的开发者体验，降低学习成本。
兼容性 ：
- 支持多种前端框架（如 React、Vue），适应不同技术栈。

核心需求

服务器端渲染 ：
- 高效地将前端组件渲染为 HTML 字符串。
路由管理 ：
- 灵活的路由系统，支持静态和动态路由。
数据获取与预取 ：
- 提供数据预取机制，确保渲染所需数据的可用性。
状态管理 ：
- 实现服务器与客户端之间的状态同步，确保数据一致性。
中间件支持 ：
- 支持权限校验、日志记录等中间件功能，增强安全性和可维护性。

系统架构设计

渲染引擎

功能：
- 负责将前端组件渲染为 HTML 字符串。
- 处理组件生命周期，支持异步数据获取。
实现：
- 利用现有的前端框架渲染工具（如 ReactDOMServer、Vue Server Renderer）。
- 提供统一的接口，支持多种前端框架。

路由系统

功能：
- 匹配请求路径与对应的页面组件。
- 支持静态和动态路由，处理嵌套路由。
实现：
- 基于文件系统的路由映射，简化配置。
- 提供 API 允许自定义路由规则和参数解析。

数据获取层

功能：
- 提供数据预取机制，类似 getServerSideProps 。
- 支持同步和异步数据获取，处理数据依赖。
实现：
- 定义页面组件的数据获取方法。
- 集成数据缓存策略，提升数据获取效率。

状态管理

功能：
- 管理应用的全局状态，支持服务器与客户端之间的同步。
- 提供状态持久化机制，确保数据一致性。
实现：
- 选用轻量级状态管理库（如 Zustand）或自定义实现。
- 提供状态序列化与反序列化功能，方便在服务器和客户端之间传递状态。

中间件支持

功能：
- 在请求处理链中执行自定义逻辑，如权限校验、日志记录。
- 提供错误处理机制，增强系统稳定性。
实现：
- 定义中间件接口，允许开发者编写自定义中间件。
- 集成现有的中间件库，支持常见功能扩展。

等等等等。

渲染流程设计

请求处理

接收请求

流程：
1. 客户端发送 HTTP 请求到服务器。
2. 服务器接收到请求，进入处理流程。

路由匹配

流程：
1. 根据请求的 URL，匹配对应的页面组件。
2. 解析动态参数，准备数据获取。

数据预取

流程：
1. 执行页面组件定义的 getServerSideProps 方法，获取所需数据。
2. 处理数据获取中的异步操作，确保数据完整性。

页面渲染

流程：
1. 使用渲染引擎将组件与数据渲染为 HTML 字符串。
2. 将初始状态数据注入到 HTML 中，供客户端激活使用。

响应返回

流程：
1. 将生成的 HTML 返回给客户端浏览器。
2. 客户端接收并渲染页面，进行后续的交互。

客户端激活（Hydration）

加载 JavaScript

流程：
1. 客户端加载必要的 JavaScript 文件。
2. 执行 JavaScript 代码，准备激活应用。

绑定事件与状态

流程：
1. 使用前端框架（如 React）将静态 HTML 转换为可交互的应用。
2. 绑定事件处理器，确保用户交互功能正常。

状态同步

流程：
1. 客户端获取服务器注入的初始状态数据。
2. 将初始状态与前端状态管理工具同步，确保数据一致性。

实现步骤

选择技术栈

前端框架 ：
- 以 React 为例，利用 ReactDOMServer 进行服务器端渲染。
- 也可支持 Vue 、 Svelte 等其他前端框架，扩展性更强。
构建工具 ：
- 使用 Vite 作为构建工具，提升开发体验和构建效率。
状态管理 ：
- 选用 Zustand 进行状态管理，轻量且易于集成。
- 或者使用 Redux 、 MobX 等其他状态管理库，根据项目需求选择。

服务端渲染逻辑

// server/index.js
import fs from 'fs';
import path from 'path';
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from '../src/App';

const app = express();

// 静态资源服务
app.use(express.static(path.resolve(__dirname, '../dist')));

// 所有路由处理
app.get('*', (req, res) => {
  const context = {};
  const appHtml = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  const indexFile = path.resolve(__dirname, '../dist/index.html');
  fs.readFile(indexFile, 'utf8', (err, data) => {
    if (err) {
      console.error('Error reading index.html:', err);
      return res.status(500).send('Internal Server Error');
    }

    const html = data.replace('<div id="root"></div>', `<div id="root">${appHtml}</div>`);

    res.status(200).send(html);
  });
});

app.listen(3000, () => {
  console.log('SSR Framework running on http://localhost:3000');
});

客户端激活逻辑

// src/entry-client.jsx
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

hydrateRoot(
  document.getElementById('root'),
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

状态管理与同步

// src/store.js
import { create } from 'zustand';

export const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

服务器端注入初始状态 ：

// server/index.js
// ...之前的代码
const initialState = { count: 0 };
const appHtml = ReactDOMServer.renderToString(
  <StaticRouter location={req.url} context={context}>
    <App initialState={initialState} />
  </StaticRouter>
);

const stateScript = `<script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}</script>`;

const html = data
  .replace('<div id="root"></div>', `<div id="root">${appHtml}</div>${stateScript}`);

res.status(200).send(html);

客户端获取初始状态 ：

// src/store.js
import { create } from 'zustand';

export const useStore = create((set) => ({
  count: window.__INITIAL_STATE__.count || 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

......

简历优化（35K+ 简历模板）

技能描述

熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想
掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG
熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理
掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建
丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎
丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理
基于 Node.js 开发脚手架、打包构建优化工具及中间件服务
掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
团队管理经验，并在项目架构设计与性能优化方面具有丰富经验
算法与编程技术
- 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
- 重点掌握动态规划的基本概念、解题步骤和经典题目。
3D 数字孪生平台开发经验
- 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
- 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
- 熟悉材质、光效和粒子系统的实现与优化。
全面性能优化能力
- 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
- 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
- 具有应用性能优化经验，包括数据结构优化和应用模块更新。
- 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目描述

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

遇到了什么问题 question，需求
怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
具体方案落地
结果反思，细节优化思考

大家先看这段描述：

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

深度优化一下

工作内容和成果

【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
【优化】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
【 自研 OA 打通 】...

STAR

【技术栈】

Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
数据库 ：MySQL
管理工具 ：SVN

【产品前端研发负责人】

情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

其实还不够，这些项目才是求职香饽饽

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)
大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)
企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
前端性能、异常与行为监控
3D 可视化数字孪生低代码实战 💥
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践

年包 50W+ 薪资长线规划

核心要素

全面的技术储备
1. 框架基础
  - Vue 和 React 经验：包括 Vue3 + Typescript 和 React18（Hooks、Concurrent）
  - 掌握框架原理：React 生态库（React-Router、Redux）和 Vue 生态库原理
2. 工程化能力
  - 构建工具：Webpack、Vite、Rspack、ESBuild、swc
  - CI/CD 自动化：自动化构建和自动化部署
3. 基建能力
  - Node.js、命令行工具开发（Cli）
  - UI 库、图表库、工具库开发
4. 业务领域经验
  - 管理系统和图表类应用
  - 可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
项目经验
- 参与过至少两个大型项目，并主导过一个复杂项目
1. 管理系统：包括项目搭建、技术方案选择、技术栈构建、CI/CD 流程
2. 其他领域项目：如可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
面试表现
1. 个人介绍
  - 准备个人介绍草稿，涵盖基本信息、技术栈和项目重难点
2. STAR 法则
  - 问题描述：阐述遇到的问题或需求
  - 解决方案评估：方案对比与选择（如 React 状态管理：redux、mobx、jotai、recoil，Vue3 使用 Pinia）
  - 方案实施：具体的实施步骤
  - 反思与优化：项目反思及优化建议
3. 面试准备
  - 重点复习知识点：如 v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型
  - 技术储备：结合项目经验展示技术在项目中的应用
学历提升
1. 现有学历：大专
2. 未来计划：尽快取得本科证书（不需要注明具体年限）
3. 学历背景：民办学校
4. 内推建议：应对学历和工作经历问题，通过内推提升机会

补足短板

项目简单，管理后台一做就是大半年，天天 CRUD
- 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
- 找一些不错的项目练手
- 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
- 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）
技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）
架构、方案设计没碰过
- React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
- Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite
没有专精的技能或业务
- 自驱（假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
- 与生俱来有些东西，好奇心、自驱力、清晰规划
- 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院——全程陪跑、督学、内推

⚠️ 暂不支持的文档区域，【文档小组件】

跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
协同编辑器（文档类、画板类）wangEditor、CKEditor
团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
3D 可视化数字孪生 bigdata
低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
大厂 UI 组件库（Vue3）整体设计与开发实践
大厂业务 Hooks 库（React 18）整体设计与开发实践
埋点与数据监控平台实战
3D 可视化数字孪生实战 💥
- 基于 cesium 方案的 WebGIS 开发实践
- 基于 WebGL 3D 可视化开发实践

妙码学院全网独家项目实战矩阵

所有项目实战，均完全 从零到一手写 ， 纯原创 ，项目架构与编码规范真一线大厂级。

微前端在分拆原子应用场景下的落地与实践
协同编辑器从零到一架构实现
推动团队基建落地
- React UI 库
- Vue Composition API 库
- 企业级脚手架
数字孪生平台整体架构设计
企业级无代码可视化平台实践（Vue3）
低代码平台设计与实现
- 编排引擎
- 流程引擎
- 编辑器
- 代码执行器与 JavaScript 沙箱
用户行为分析 SDK 及监控可视化整体实现
可视化渲染引擎设计与实现
基于 RAG / Agent 前端 AI 应用流程编排平台

不同阶段对前端人的硬性要求

以下是对您提供的内容进行权威和专业化改写的建议：

1~3年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

关键在于通过学术教育或网络资源加强基础知识；
在简历中以多种方式展示对前端的热情，展现个人潜力；
积极探索前沿技术，关注国内外技术动态；
尝试开发小型项目或参与社区开源项目；
建立技术博客，以输出促进知识吸收。

3~5年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

关注社区中关于进阶的资料和路线，强化基础知识；
深入掌握常用框架的高级用法，探索其原理；
在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；
思考提高团队效率的方法，例如：
- 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
- 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
- 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
- 尝试搭建CI/CD平台，维护公司内部的通用npm包；
- 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
协助或主导业务目标制定，合理推动项目达成预期效果；
是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
打造技术氛围，促进团队共同成长。

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】

前端前沿技术爱好者

服务端渲染（SSR）与前后端同构技术原理揭秘，字节前端专家带你光速进阶全栈

【 初中级 】谈谈你对服务端渲染的理解，之前工作中有没有实践过？

服务端渲染（SSR）概述

SSR 与 CSR 的区别

SSR 的优势与挑战

优势

挑战

SSR 在实际工作中的应用

项目案例介绍

实施步骤

遇到的问题与解决方案

【 中高级 】有了解过服务端渲染框架吗，请简单说说核心概念？

服务端渲染框架概述

常见的 SSR 框架

Next.js 核心概念

页面与路由

数据获取方法

客户端激活（Hydration）

中间件与插件

核心特性解析

静态站点生成（SSG）

代码拆分

API 路由

Next.js 的开发与部署

项目结构

......

示例代码详解

创建 Next.js 项目

定义页面与布局

数据获取示例

【 专家级 】如果让你从零到一架构实现一个 SSR 框架，请简要说说你的设计思路

设计目标与核心需求

设计目标

核心需求

系统架构设计

渲染引擎

路由系统

数据获取层

状态管理

中间件支持

渲染流程设计

请求处理

接收请求

路由匹配

数据预取

页面渲染

响应返回

客户端激活（Hydration）

加载 JavaScript

绑定事件与状态

状态同步

实现步骤

选择技术栈

服务端渲染逻辑

客户端激活逻辑

状态管理与同步

......

简历优化（35K+ 简历模板）

技能描述

项目描述

大家先看这段描述：

深度优化一下

STAR

其实还不够，这些项目才是求职香饽饽

年包 50W+ 薪资长线规划

核心要素

补足短板

妙码学院——全程陪跑、督学、内推

妙码学院全网独家项目实战矩阵

不同阶段对前端人的硬性要求

1~3年

3~5年

5年以上

职业规划指导

【初中级】谈谈你对服务端渲染的理解，之前工作中有没有实践过？

【中高级】有了解过服务端渲染框架吗，请简单说说核心概念？

【专家级】如果让你从零到一架构实现一个 SSR 框架，请简要说说你的设计思路