如何在Next.js服务端渲染阶段设置输入框的值？

嘿，我来帮你搞定这个问题！作为Next.js新手，服务端渲染（SSR）的逻辑确实容易有点懵，但其实实现起来很清晰，咱们一步步来～

核心思路是：在服务端生成页面内容的时候，就把输入框的初始值传递给组件，这样客户端拿到的HTML里已经自带这个值了，不用等客户端JS加载完再补。下面分两种常用的Next.js路由场景给你讲解：

一、如果你用的是 Pages Router（Next.js 12及以前，或仍在使用旧路由） #

Pages Router里最直接的方式就是用getServerSideProps——这个函数会在每次用户请求页面时在服务端运行，你可以在这里生成或获取初始值，再传递给页面组件。

举个例子，假设你的搜索页面是pages/search.js：

// pages/search.js
import { useState } from 'react';

// 页面组件接收服务端传过来的初始值
export default function SearchPage({ initialSearchQuery }) {
  // 用服务端的初始值初始化客户端的状态
  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="输入关键词搜索..."
      />
    </div>
  );
}

// 这个函数完全在服务端运行，不会被打包到客户端JS里
export async function getServerSideProps(context) {
  // 这里可以灵活生成初始值：
  // 比如从URL的query参数里取（用户直接访问/search?q=前端教程）
  // 或者从cookie、数据库、外部API获取
  const initialSearchQuery = context.query.q || "热门搜索词";

  // 把初始值作为props传给页面组件
  return {
    props: { initialSearchQuery },
  };
}

这样一来，当用户访问这个页面时，服务端会先执行getServerSideProps拿到初始值，渲染出带初始值的输入框HTML，再发送给客户端。哪怕用户禁用了JS，输入框里也能看到初始值，完美实现你的需求～

二、如果你用的是 App Router（Next.js 13+ 新路由） #

App Router的逻辑更简洁，默认组件都是Server Component（在服务端运行），你可以直接在Server Component里获取初始值，再传给需要交互的Client Component（因为输入框要响应 onChange，必须是客户端组件）。

步骤1：创建Server Component（页面入口） #

// app/search/page.js
// 这是Server Component，默认在服务端运行，不用加任何标记

// 服务端异步获取初始值的函数
async function getInitialSearchQuery(request) {
  // 比如从URL参数里取初始值
  const urlParams = new URLSearchParams(request.nextUrl.search);
  return urlParams.get("q") || "默认搜索关键词";
}

export default async function SearchPage() {
  // 在服务端获取初始值
  const initialSearchQuery = await getInitialSearchQuery();

  // 把初始值传给Client Component
  return <SearchInput initialValue={initialSearchQuery} />;
}

步骤2：创建Client Component（带交互的输入框） #

// app/search/SearchInput.jsx
'use client'; // 必须加这个标记，告诉Next.js这是客户端组件

import { useState } from 'react';

export default function SearchInput({ initialValue }) {
  // 用服务端传过来的初始值初始化客户端状态
  const [searchQuery, setSearchQuery] = useState(initialValue);

  return (
    <input
      type="text"
      value={searchQuery}
      onChange={(e) => setSearchQuery(e.target.value)}
      placeholder="输入关键词搜索..."
    />
  );
}

这个流程里，Server Component在服务端完成初始值的获取和页面框架的渲染，客户端只需要接管输入框的交互逻辑，同样能保证页面加载时输入框就有初始值。

几个小提示 #

• 测试的时候可以禁用浏览器的JavaScript，看看输入框里有没有初始值——如果有，说明服务端渲染的逻辑生效了。
• 如果初始值需要从数据库或外部API获取，直接在服务端的函数里调用就行，不用考虑跨域问题（因为是服务端发起的请求）。
• 后续客户端修改输入框的值完全不受影响，因为我们用useState把初始值同步到了客户端状态里。

内容的提问来源于stack exchange，提问作者Kheersagar patel