Change target page depending on server/client rendered?

[howells]

Hi! I'm really struggling to wrap my head around how I can conditionally config my routes depending on whether they are rendered on the server or client.

Given these two routes:

routes.add('knowledge', '/knowledge', 'knowledge')
routes.add('article', '/knowledge/:id-:slug', 'article')

On the client side, I want the article to open in an overlay but have the URL updated appropriately, so I'd like the target page to be 'knowledge', same as the index of articles. If the URL is accessed directly, I'd like the server to render the knowledge page.

Any ideas of how I can achieve this?

[fridays]

There is an example app nextgram that does something similar, maybe that helps?

[howells]

@fridays ah! Perfect, many thanks

[joncursi]

@fridays can you clarify how to do this with next-routes? Particularly this line:

https://github.com/now-examples/nextgram/blob/master/pages/index.js#L40

Seems like the first string is saying "let's stay on the same route but add in this query param to the URL", and the second string is saying "let's act like we're going to navigate to this other URL, but not actually navigate. we'll just mask the URL to look like this."

Not sure how to mimic this with Router.pushRoute(...).

Furthermore, they are using an <a /> tag with an href to gain accessibility, but using preventDefault to ensure the onClick handler is called instead of the href:

https://github.com/now-examples/nextgram/blob/master/pages/index.js#L59-L61

Not sure how to accomplish this with the built-in <Link /> component (no onClick prop).

[joncursi]

@howells were you by chance able to figure this one out?

[howells]

@joncursi afraid not!