Server-side render a modal in React upon clicking a button for NextJS

Question

I would like to server-side render a modal in ReactJS upon clicking a button. You can see an example on Product Hunt's website:

https://www.producthunt.com/

If you click on one of the popular products, it opens a modal, and then the page is rendered as a normal request on the server-side.

I'm not very good with React, but could someone point me in the right direction or show a code example?

I'm thinking I could prefetch the page upon someone clicking the link that activates the modal, then display the fetched content within the modal: https://github.com/zeit/next.js/tree/master/examples/with-prefetching

Answer 1

I don't think the product modals on producthunt are server-rendered. When you click on a product it opens the modal and then loads the data client side. Along with this operation, the also update the URL using history . Now if you refresh the page it would render a different view. You may implement this with next by having two different views in a similar fashion. For example you could create two pages in the pages directory, say:

pages
|- homepage.js
|- product.js

Then in your server configuration you can route all the requests starting from /product to render product.js . Modal logic can stay in homepage.js where you would render the appropriate modal when clicking on a product. Also you can push the url to history when you open the modal.

Now if the page is refreshed or a new browser tab/window opens with the same url it would ask the server to render product.js .