Because Nuxt renders pages on the server, you should use the nuxt-link
components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using nuxt-link
and isClient
to navigate and avoid reloading data.
'fetch' can do server side rendering:
async fetch ({store, redirect, error}) {try { const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos') store.commit('init', res.data) } catch (err) { redirect('/error') }}
Once it successfully store the data inside the store object, we don't need to fetch it again.
To avoid refetching the data, we can use 'isClient' from the context.
async fetch ({store, redirect, error, isClient}) { if (isClient) { return } try { const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos') store.commit('init', res.data) } catch (err) { redirect('/error') }}
Because this fetch method can be reused in elsewhere, so we can make it a sprated file:
shared.js:
import axios from 'axios'export async function init ({store, redirect, error, isClient}) { if (isClient) { return } try { const res = await axios.get('https://todos-cuvsmolowg.now.sh/todos') store.commit('init', res.data) } catch (err) { redirect('/error') }}
Required it in side page:
Computed
- { {todo.task}}
Here we use 'nuxt-link' to the navigation.
Computed page should not load the todos again, since we already have the data store in the store object.
computed.vue:
Home
- { {todo.task}}