Frontend: Trying to mimic wordpress page templates

[invisibled]

Loving this starter so far! I've run into an issue I can't seem to solve and thought i'd throw it out here to see if anybody had an idea of how to achieve this.

What i'm looking to do, is mimic Wordpress's page template system in a way so that any post/page will use the pages/post.js file unless I want to have a different layout for say a /plans route. I would be able to put in a pages/plans.js file and tell the router to use that file instead of the pages/post.js file.

currently, i've modified the ./server.js file routes like this

server.get("/category/:slug", (req, res) => {
      const actualPage = "/category"
      const queryParams = { slug: req.params.slug }
      app.render(req, res, actualPage, queryParams)
    })

    server.get("/_preview/:id/:wpnonce", (req, res) => {
      const actualPage = "/preview"
      const queryParams = { id: req.params.id, wpnonce: req.params.wpnonce }
      app.render(req, res, actualPage, queryParams)
    })

    server.get("/:slug", (req, res) => {
      const actualPage = getPageTemplate(req.params.slug)
      const queryParams = { slug: req.params.slug, apiRoute: "post" }
      app.render(req, res, actualPage, queryParams)
    })

    server.get("*", (req, res) => {
      return handle(req, res)
    })

so my /:slug route is working fine, when i navigate around it uses the pages/post.js file, and the index route uses pages/index.js. I've also added const actualPage = getPageTemplate(req.params.slug) which is simple a switch statement against the slug which looks like

module.exports = slug => {
  switch (slug) {
    case 'plans':
      return '/plans'
    default :
      return '/post'
  }
}

now this actually works when i first load the website. If i go to localhost:3000/plans then it loads the pages/plans.js file and loads up my custom template. Cool! Server side routing works, but the problem comes when i navigate away and back to /plans, the client side routing loads up pages/post.js.

So, does anybody have any idea where I am going wrong here? What would I need to do in order to get that /plans route to always use pages/plans.js. Any advice is greatly appreciated!

[neko-fire]

Any ideas? I also run into the same issue, but I don't have a solution yet.

[spetrey]

I'm having the same issue. Can't seem to find a solution.

[freddiemixell]

This is what I'm using

server.get("/:slug", (req, res) => { const actualPage = "/page"; const queryParams = { slug: req.params.slug, apiRoute: "page" }; const actualPageBlog = "/blog"; const queryParamsBlog = { slug: req.params.slug, apiRoute: "post" }; if(req.params.slug === "blog") { app.render(req, res, actualPageBlog, queryParamsBlog); } else { app.render(req, res, actualPage, queryParams); } });

[freddiemixell]

This will give you a different page template for a blog just rinse and repeat

[obelmont]

Hi All,

Just wondering if anyone had any success in setting this up? I am having a range of issues including working on initial page load but not between pages and more recently the incorrect page template being used (which is the issue I am currently trying to fix). I believe this might have to do with the link component not being setup correctly? Any help would be greatly appreciated! I've included the server and link code.

Express

server.get("/:slug", (req, res) => {
    const actualPage = "/page";
    const queryParams = { slug: req.params.slug, apiRoute: "page" };

    const actualPagePagetemplate = "/page-slug";

    const actualPageProjects = "/projects";
    const queryParamsProjects = {};

    if(req.params.slug === "projects") {
        app.render(req, res, actualPageProjects, queryParamsProjects);
    }
    else if (req.params.slug === "page-slug") {
        app.render(req, res, actualPagePagetemplate, queryParams);
    }
    else {
        app.render(req, res, actualPage, queryParams);
    }
});

Link

<Link href="/post?slug=page-slug&apiRoute=page" as="/page-slug">
  <a style={linkStyle}>Page Name</a>
</Link>

Edit:

Ended up figuring this out. Turns out it was my link component that was setup wrong. This was more of a "I don't understand next.js properly" than a postlight issue. The link href should be what that references the next view combined with the query string where the "as" prop should be the update to the url.

<Link href="/pagetemplatename?slug=page-slug&apiRoute=page" as="/page-slug">
  <a style={linkStyle}>Page Name</a>
</Link>

Gathered this off the link component from the menuItems map in the Menu component. actualPage here being the view.

<Link
    as={`/${item.object}/${slug}`}
    href={`/${actualPage}?slug=${slug}&apiRoute=${item.object}`}
    key={item.ID}
>
    <a style={linkStyle}>{item.title} {item.object}</a>
</Link>

Hope this helps someone in the future!

[feeohnah]

@obelmont Did this resolve your initial page load issues? I'm experiencing an extremely high TTFB with my headless Wordpress site ( https://staging.danielfariagallery.com/ ) and am having a really hard time determining the cause.

[obelmont]

@feeohnah I managed to sort out the page load issues but I feel your issue might be different? I also haven't created a staging site for my install yet like you have so I haven't been able to test its actual TTFB. Did you think the slowness was as a result of new api endpoints? Id be happy to share the wordpress side of things if that helps!

[feeohnah]

@obelmont no, I don't think it's because of the endpoints. We experimented with adding new api endpoints to try and cache requests with Wordpress's Transients api, but that didn't seem to improve the TTFB issue. How did you solve your page load issues?

[BartoszLobejko]

Hey, I'm experiencing a similar issue with TTFB. It seems like processing of data just takes 2s for anything.

I found a simple and lame solution. Run WordPress on production mode and everything is blazing fast! :)