6

I am testing around with Nuxt.js to generate a static website.

Is it possible to generate a 100% static site when using an API to fetch data, so that one can get rid of the API and requests?

Based on my tests so far that all the files are generated properly and being hosted on the Github Pages and can be reached, except:

  1. When hitting the pages directly via URL bar, no error (expected behavior)
  2. When navigating to the pages via routes, the pages is still sending the request to API (does not exist outside local machine), even though the data has already been fetched and the .html file is generated with the data already during the generate process.

Using asyncData to get the data for the components from the API.

Improve this question
2
  • 1
    There was a discussion 100%static site possible?#1949 which comes down to: make requests during static generation (nuxt.config.js ... {generate:), save them to a json file, and then import that file either to vuex state or directly into components. I wonder if there is a ready solution for that, so that we don't have to write our own bicycles and miss edge cases, for Angular there is TransferHttpCacheModule... Commented Aug 14, 2018 at 11:07
  • before encountered that thread, that's exactly what I did, populate the vuex with the data during the generation process. Thank you for sharing this :) Commented Aug 14, 2018 at 12:24

2 Answers 2

Reset to default
3

The solution was to use vuex (state management) and populate the state with the data during the generation process.

The state will be already populated in the generated .html file

For more information please refer to the this thread where it is being discussed.

Example:

async fetch({ store }) {
  if (_.isEmpty(store.getters['tags/getTags'])) {
    await store.dispatch('tags/fetchTags');
  }
},
  • The fetch method is used to fill the store before rendering the page
  • fetchTags is the actions making a request to api and populate the state
  • The logic is quite simple: if the tags state is not already populated, then populate it by making a request to an api
  • When running nuxt generate the state will be populated for the deployment, hence to api request won't be sent
  • The state will be injected into the .html file (pic below for reference)

state example populate in the .html file

If anyone have a better solution, please share, I will gladly accept that answer as a correct one :)

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Could you share at least some example code in the solution ? It's not very clear, do you save a state to a file and then read it, or it is magically works between route changes ?
have added the sample code on how I have done it. State will be populated and saved into the .js file (let's call it nuxtjs magic). Then since a generated static website is still a Vue app everything works as expected
0

There is a trick to make your routes accessible via directly entering the url into the address bar if you are hosting your site in github pages. You just need to configure your webpack to generate multiple index files with the same entry point that will be stored in each directory based on your routes.

This is easily achieved if you are using vue-cli to generate your project.

For example, I have these routes:

enter image description here,

I just need to create a vue.config.js in the root of my project.

enter image description here

and inside the vue.config.js file, I just need to register several more pages based on what's on my router. Each entry point should be your main.js file, and the template should be your index.html.

The filename should be <your-route>/index.html

If you entered sub-directory into the filename, Vue will automatically create those directories if they don't exist during compilation. So if the filename you entered is photography/index.html, Vue will automatically create a photography directory inside the dist directory.

enter image description here

And if you check your dist directory, you will see the directories with an index.html inside.

enter image description here

So when you enter your route into the address bar, it will actually access one of these directories and display the index.html.

This is what I actually did to my homepage which I hosted in my github account.

Here's my github page: https://wisdomsky.github.io/

I have two pages the about and photography and if you will enter https://wisdomsky.github.io/photography into the address bar, it will render my photography page instead of receiving the Github 404 page.

Improve this answer

4 Comments

Thank you for the detailed answer, your answer is addressing point 1, which is working as expected :). If you inspect your photography page, you will still see that it is making a request api to unsplash (which might be the behavior you want), but for me the .html file with the data already generated so there is no point in trying to fetch that data from api again.
In Nuxt.JS you can determine if your page is served from client or from server. you can use that to wrap your API calls in a condition so that they won't be called again if your page is served via client. See nuxtjs.org/examples
@Julian Paolo Dayag, well, if requests won't be made on a client, then you will end up with empty content on routing, since it won't be requested. You either have to route between simple .html files without SPA routing, or cache requests at nuxt generate to a file, so that the client can't read data from that ready file and still have SPA routing.
my solution was to use vuex and populate the store manager during the generation process

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.