Page is rendered as static on prod but dynamic in dev.

[exotic echo]

I am currently developing a page with a book listing. This page includes filtering/searching for these books. I am using states to communicate the search parameters between multiple components (Is this even a good practice?).

While developing in dev (npm run dev), the application works fine. I can filter and everything works.
However, when building (npm run build && npm run start), this functionality is lost.

I was able to pinpoint this as the page is rendered as a static page only when building. I was able to avoid this by calling an unused useSearchParams() to force the page to be rendered dynamically. But I believe this to be a hacky fix.

[exotic echo]

bump

[undone quail]

Why don't you use props to pass the params to other components

And when you mean static no state is updating?

[exotic echo]

-I am using props to pass the params to the components and then using those props to set states within the component but the states are set to null or undefined since the props are being sent as undefined.

-Yes, the page is rendered statically and as such doesn't send the correct prop values to the component. This doesn't happen when the page is rendered dynamically. However to force a dynamic render, the "useSearchParams()" function must be somewhere in one of the components even though I don't need it since I get the params as props.

btw I am using NextJS 13 with the new app directory

[undone quail]

Are you able to send some relevant code?

Just do I can understand what your trying to do

[exotic echo]

Yeah, sure. Give me a sec.

{
    const news = (await getNews(searchParams)).newsList;
    const count = (await getNews(searchParams)).count;

    return(
        <article>
            <HeadLine>お知らせ一覧</HeadLine>
            <NewsList newsList={news}/>
            <Pager count={count} path="/news" params={searchParams}></Pager>
        </article>
    )
}```

This is the page which renders the component.

[undone quail]

So news and count are both undefined

[exotic echo]

When rendered statically, yes.

However, I added the following line to the Pager component.

{
    const [url, setURL] = useState('');
    const [numPages, setNumPages] = useState(1);
    const [min, setMin] = useState(1);
    const [max, setMax] = useState(1);
    const [currentPage, setCurrentPage] = useState(1);
    const [limit, setLimit] = useState(30);

    const searchParams = useSearchParams();
...

const searchParams = useSearchParams();

This line is actually unused, but its the only way I got the page to render dynamically.

[undone quail]

And you can confirm that the data returned is not undefined

From the getNews function

Also are there possibly any errors preventing the data from being yodated

[exotic echo]

Yes. Only when its dynamic though.

What is weird is that the page renders dynamically when running dev, but statically when building.

And for it to build dynamically, I have to call that unused function.

[undone quail]

Your using the app directory correct?

[exotic echo]

Yes

It might just be a bug

[undone quail]

Is it a client component?

Actually you would get an error

If it wasn’t

[exotic echo]

The page is server, the pager component is client.

[undone quail]

Is it loading any information at all?

[exotic echo]

What do you mean?

[undone quail]

Like is the data you want being rendered initially? Or is it only when you want the data to be updated?

[exotic echo]

Oh I got you. The page renders correctly initially. But it does not update.

[undone quail]

And a silly question but your sure the set state function is being called

[exotic echo]

Haha yes.

I am using effects to set the params.

Btw, the page works as expected. The small caveat is that an unused call must be done for it to work as expected.

[undone quail]

That is true. You may want to open a bug on the repo. Maybe I’m missing something

[exotic echo]

For sure, I just wanted to see if I was missing something before doing that.

Thank you for your help :)