Question

我刚刚开始学习next.js，正在从事一个项目，但是在获取数据时遇到了一些问题。我了解我们需要使用getInitialProps并查询一个api并获取数据并将其呈现在服务器上。现在我想做的是有一个搜索框，用户可以在其中键入一个术语，然后onChange我用搜索术语设置状态，因为他们键入它会重新查询函数中的api已经调用了getSearch（），然后进行设置searchData到我存储在状态中的结果，但是它是在客户端而不是服务器端执行的。我该如何处理它，使其呈现在服务器上，而不是像getInitialProps这样的客户端上呈现？为了使它在服务器中运行，我需要在getSearch函数中执行一些特殊的操作吗？我应该回忆一下getInitialProps并传递搜索词吗？使搜索查询呈现在服务器而非客户端上的最佳方法是什么？

Answer 1

无法在服务器上使此动态（随用户输入）动态搜索。需要在用户界面上将其处理为per docs

对于初始页面加载，getInitialProps仅在服务器上执行。 getInitialProps将仅在导航至客户端时在客户端上执行通过Link组件或使用路由API的不同路由。

将在服务器上预呈现的唯一搜索是重新加载该页面的搜索。

示例

<form action="/search-enpoint">
  <input name="search" type="text" placeholder="Search" />

  <button>Find</button>
</form>

此表单将被提交到/search-enpoint?search=qwe，您可以在custom server中找到

// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;

    if (pathname === '/search-enpoint') {
      app.render(req, res, '/index', query);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, err => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

但同样，此搜索不是动态的。

希望这会有所帮助。

Next.js重新查询数据

1 个答案: