Some changes to better support parameterized urls

[jonbretman]

I've been following this but I actually don't think it's possible with the current API get get parameters routing working with universal rendering (although I'm very happy to be wrong!).

I think these changes will allow it though:

• Allow renderOptions to be passed to the render method on the server - this means you can specify the page option
• Use 'as' for 'pathname' on the client if present so component gets the true pathname and can parse out parameters in getInitialProps.

In general it seems to me that extracting dynamic parts of the url would need to happen in getInitialProps as that happens on both client and server, probably using some shareable route config.

Here is a super simple example of what I mean, but if it would help I could create a sample app somewhere.

routes.js

const route = require('path-match')();

module.exports = [
    {
        match: route('/posts/:slug/'),
        page: '/posts',
    },
    {
        match: route('/'),
        page: '/index',
    },
];

server.js

const route = require('../routes');

// in a request
const {pathname, query} = parse(req.url, true);

for (const {match, page} of routes) {
    const params = match(pathname);

    if (params !== false) {
        app.render(req, res, pathname, query, {
            page,
        });
        return;
    }

}

// fall back to next routing
handle(req, res);

pages/posts.js

import Link from 'next/link'
import routes from '../routes';

export default class extends React.Component {

    static getInitialProps (args) {
        const route = routes.find(route => route.page === 'products');
        const params = route.match(args.pathname);
        return {
            slug: params.slug,
        };
    }

    render () {
        return (
            <div>
                Blog post with slug {this.props.slug}
            </div>
        );
    }
}

[arunoda]

Use 'as' for 'pathname' on the client if present so component gets the true pathname and can parse out parameters in getInitialProps

Our use of pathname and as is totally different. pathname is the url of the actual page.

I think it's totally doable without these changes.
See: https://github.com/fridays/next-routes and other similar projects.

[jonbretman]

Hey @arunoda, thanks for the quick reply.

pathname is the url of the actual page.

I am not seeing this behaviour in the client. Let's say I have the following:

<Link href={"/posts/interesting-post-about-next/"} as={"/posts"}>
    <a>
        Go to post
    </a>
</Link>

Then in getInitialProps in pages/post.js pathname is /posts (only for a client-side rendered posts page.

https://github.com/fridays/next-routes does look interesting but I still think being able to provide the page option to renderToHTML would be useful for SSR.