Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Also run Init in production #36

Open
mdings opened this issue Jun 5, 2021 · 2 comments
Open

Also run Init in production #36

mdings opened this issue Jun 5, 2021 · 2 comments

Comments

@mdings
Copy link
Contributor

mdings commented Jun 5, 2021

Is it correct that the exported Init function for pages only runs in develop mode? In production it seems that the data is being loaded from the cached json-file.

Although a nice feature, I'm running into cases where I need the latest data from the server to be fetched and hydrate any content from cache. For example: I have a website where pages can be created inside a CMS. When building the website all the pages are pre-rendered and cached, which is amazing. However, whenever I make a small change inside the content for the page I would need to rerender the full website in order for that change to be visible. With the previous version the Init function would also still run in production mode. So the browser renders the static version from the server. Then the Init-function fetches the latest version from the server and goes ahead and updates the content that was changed. So I get the lastest version no matter what.

Is that still possible with the current version of hyperstatic?

@loteoo
Copy link
Owner

loteoo commented Jun 6, 2021

Hello @mdings !

I think you could achieve what you're looking for by creating a hyperapp http effect similar to the loadStatic one in the init of your pages, example:

// in some utils file...
const promiseLoaderFx = async (dispatch, { loader, action, error }) {
  try {
    const data =  await loader();
    dispatch([action, data])
  } catch (e) {
    dispatch([error, e])
  }
}

const promiseLoader = (args) => [promiseLoaderFx, args]

// In you page file..
export const init = (state, location) => [
  state,
  loadStatic({
    loader: async () => {
      const data = await getPageData(`https://foobar.com/api/${location.params.id}`)
      return data
    },
    action: HandleData,
    error: HandleError
  }),
  promiseLoader({
    loader: async () => {
      const data = await getPageData(`https://foobar.com/api/${location.params.id}`)
      return data
    },
    action: HandleData,
    error: HandleError
  }),
]

This will load the data as usual via the hyperstatic json cache, but then also via your live API at runtime (in production)

@mdings
Copy link
Contributor Author

mdings commented Jun 6, 2021

Hmm that sounds like a good idea. But that doesn't trigger the promiseLoader effect on navigation. So I guess I have to add the same function to the pageChange callback as well. Is that correct?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants