Next.js dynamic pages do not update - next.js

We built a simple blog using Next.js and noticed that none of the changes we're making on the CMS (headless wordpress) are reflected on the dynamic pages. For example we updated all the author names and although the changes show up correctly on the blog landing page, the dynamic pages are not reflecting this change (i've tried different browsers and incognito window). I understand that next.js builts these pages when deploying but if this would then mean we'd have to re-deploy everytime we make even a small udpate to the conten on the backend.

Your static pages are fetched when built. But Next.js does have an option for refreshing them on the fly.
Try revalidate options in getStaticProps (https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every second
revalidate: 1, // In seconds
}
}
They say that it's ISR approach (https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration)

Related

Is getStaticPaths necessary if I already use Link inside HTML in getStaticProps?

If I use getStaticProps and use the data to render a page like a table of contents, is NextJS smart enough to follow those links and call getStaticProps to statically render those pages statically too?
In this example /page/[id].js is a dynamic page.
//inside: index.js
export function Page({list}) {
return (
<div>
{list.map(item => <Link href={'/page/'+item.id}><a>{item.title}</a></Link>)}
</div>
);
}
export async getStaticProps(() => {
var list = await fetch(...);
return {props: list};
});
Or am I required to use getStaticPaths to explicitly declare all those links?
It is not possible to have dynamic route (like that /page/[id].js) with getStaticProps but without getStaticPaths.
If you could, again theoretically, have that then it would make almost no sense because every page will be the same, because you can't get this param id in getStaticProps because getStaticProps is called in build time not in runtime. So you would only be able to generate one page that way and that's it.
But other that that, yes, Next.js will handle links for dynamic page just fine, for example if you have dynamic route without getStaticProps then all the links will work nicely.
If you're using getStaticProps, you also have to use getStaticPaths in /page/[id] because it's a dynamic route.
However, you do not need to explicitly return all paths in it. With fallback: 'blocking' Next.js will generate any path that wasn't returned in getStaticPaths on-demand, and cache them for future requests.
You could have the following getStaticPaths function in the /page/[id] page.
export async function getStaticPaths() {
return {
paths: [], // No pages will be generated at build time
fallback: 'blocking' // Pages not generated will be on first request
}
}
No pages would be generated at build time. Instead, all pages would be statically generated when the first request for that page comes in.

Next Plugin guidance / loop through pages and read static property

I'm evaluating next.js for a project. We need to translate the route urls, so for
example.com/about-us becomes example.com/ueber-uns in German
Basically I can acheive this with rewrites and redirects. However it is tedious to set this up manually, so I though about writing a plugin. However I haven't found any docs regarding plugin development or a public API for plugin developers. Does such exist?
(1) add a static property to my pages inside the pages folder
const SomePage: React.FC = () => {
static i18nRoutes = { de: "ueber-uns" }
return "About us"
}
(2) Inside a plugin iterate over all pages, read the static i18nRoutes prop and add rewrite and redirect rules, so if the next project is generated for the German language, example.com/ueber-uns points to example.com/about-us
What I would like to know, besides existing plugin documentation, is how I can achieve the second point?

Running Zopim Chat after page load hurts page speed

I have integrated Zendesk Zopim Chat to Vuestore front. Though adding this chat causes the pagespeed to drop score.
I did added the script through async and added this code in mounted section of page
zE(() => {
// Zopim API
$zopim(() => {
$zopim.livechat.concierge.setTitle('SiteTitle');
$zopim.livechat.concierge.setName('Name');
$zopim.livechat.concierge.setAvatar('https://example.com/siteLogo.svg');
$zopim.livechat.window.setTitle('Support');
$zopim.livechat.prechatForm.setGreetings('How can we help?');
$zopim.livechat.theme.reload();
});
});
Now the issue is that it's affecting the page speed.
I have added screenshot that how it is affecting the page speed.
Check this below screenshot:

Not able to fetch menu data with WPGQL

I am using the graphql-request npm package. It is working fine for all page, and post requests, but I am not able to get the menu data.
When I do it within the IDE it returns the data as expected, however, when I call it from the Next.js client it is returning null.
This is the request:
const response = await graphcms.request(`
query MyQuery {
menu(idType: NAME, id: "navbar") {
id
name
menuItems {
nodes {
url
title
label
}
}
}
}
`);
Any ideas what can be causing this to work in the IDE but not fetching on an external request? I did not see any options for settings.
I have discovered this is because menus require locations. Since I had created a theme that simply redirected to my Next deployment, it did not include any menu locations.
You can follow these instructions to add menu locations to a theme:
https://wordpress.org/support/topic/adding-a-new-menu-location/

Wordpress + angularJS route + SEO

I'm currently on a project where I want to have :
Wordpress for easy content managment.
AngularJS for some UX (the goal is to have no page reload + nice animation between pages loading) + further functionalities.
And care about the SEO.
In that purpose, I'm using Angular's Route module to get the user a smoother experience, and using the Angular HTML5 "pretty urls" mode to "hook" the page switching (No hashbang -> natural links).
I don't want to generate hashbangs because it's more difficult to maintain (HTML snapshots with phantom.js server etc...) than just leaving Wordpress generate the content as he does it well.
So my intention was to let angularJS controls the user's navigation, and wordpress to generate the content when user will F5 & for the SEO bots(No JS).
But I can't find a clean & clear solution to this problem because either the Angular way will work, either the "PHP" way will work.
Any ideas will be welcome ! :)
Wordpress already provides you with wp_ajax_ hook for AJAX requests. ( link)
Example:
mysite.com/my-test-page
Wordpress
In this simple case we need our wp_ajax_ hook to retrieve a page by it's slug.
One easy way is to use get_page_by_path($page_path, $output, $post_type), to get the page we want where $page_path is the slug.
Then return the page data as JSON, return json_encode($pageArray);
AngularJS
Route: Do a simple GET:
.when('/:page_slug', {
templateUrl: 'views/page.html',
controller: 'PageController',
resolve: {
page : function($route) {
return $http.get(wp_ajax_url,
{
'action': 'the_ajax_hook',
'data': $route.current.params.page_slug
}
);
}
}
})
SEO
Google recently announced they are updating the Webmaster Tools to show you how a Javascript generated site renders and provide you with tips on how to make your site crawl-able.
http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html
Apart from that you can use other services to make your site SEO-friendly today:
getseojs.com
brombone.com
prerender.io

Resources