Javascript Next.js搜索/筛选表单

我不熟悉React和Next.js，在学习这些库的过程中，我遇到了这个困难

我试图用一些获取的数据创建一个可过滤的表

API中的数据通过

getInitialProps（）

方法加载到服务器端

静态异步getInitialProps（上下文）{
常量元素=等待getElements（）
返回{
元素：元素，
}
}

然后我用数据和过滤表单呈现引导表。简化示例：

render（）{
返回(
名称
姓
{this.props.elements.map（（元素，索引）=>(
{element.name}
{元素.姓氏}
)}
)
}

我的第一个想法是处理搜索表单提交事件，获取搜索输入值，并使用url将用户重定向到页面，如下所示：

http://localhost:3000/elements?name=enetered_name&surname=enetered_surname

然后从

getInitialProps

中的

context

变量中检索查询字符串参数，将此参数传递给

getElements

方法，并再次从API中获取该参数，但现在使用了额外的过滤器。但此解决方案仅在重新加载第一页（从服务器）时起作用

我的直觉告诉我，这不是正确的解决方案，我把它复杂化了。我不想从你那里得到工作代码。我只需要一些技巧和指导如何解决这个问题