如何在 Next.js 中重新查询数据答案

【问题标题】：How to requery data in Next.js如何在 Next.js 中重新查询数据
【发布时间】：2018-10-10 21:57:59
【问题描述】：

我刚开始学习 Next.js，但在查询数据时遇到了一些问题。

我了解getInitialProps 用于查询API 并获取数据，并在服务器上呈现。

我想要一个用户搜索的搜索框，当他们键入时，它会在函数中重复查询 API 并将结果存储在状态中，但在服务器端。

我该如何处理这个问题，以便它呈现在服务器上而不是像 getInitialProps 那样在客户端上呈现？
我需要在我的函数中做些什么特别的事情才能让它在服务器上运行吗？
我应该只记得getInitialProps 并输入搜索词吗？
让搜索查询在服务器而不是客户端呈现的最佳方式是什么？

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

无法在服务器上进行这种动态搜索（当用户输入时）。这需要在 UI 上处理为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');
  });
});

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

希望这会有所帮助。

【讨论】：