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

Question

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

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

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

• 我该如何处理它以便它在服务器上呈现而不是像getInitialProps那样呈现在客户端上？
• 我需要在我的函数中做一些特别的事情来让它在服务器上运行吗？
• 我应该回忆一下getInitialProps并传入搜索词吗？
• 让搜索查询呈现在服务器上而不是客户端上的最佳方法是什么？

Answer 1

无法在服务器上进行这种动态（当用户输入时）搜索。 这需要根据文档在 UI 上处理

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

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

例子

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

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

此表单将提交到/search-enpoint?search=qwe您可以在自定义服务器中捕获

// 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');
  });
});

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

希望这可以帮助。