After.js Versions Save

Static Site Generation (SSG)

After.js has first class support for SSG and allows you to create super fast static web apps and serve them over CDN. (needs razzle 4)

renderStatic will return the data from getInitialProps and this data will get saved by razzle into a file called page-data.json. After.js won't call getInitialProps at runtime, instead it will read the page-data.json and pass it as a prop to your component.

from ./src/static_export.js you should export render and routes function.

• async render(req, res) should render your app into html and at the end it should return html and data.
• async routes() should return path for pages you want to statically generate.

// ./src/static_export.js

import { renderStatic } from '@jaredpalmer/after';
import appRoutes from './routes';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);

export const render = async (req, res) => {
  const { html, data } = await renderStatic({
    req,
    res,
    routes: appRoutes,
    assets,
    chunks,
  });
  res.json({ html, data });
};

export const routes = async () => {
  return ['/', '/about'];
};

after setting up this file you can build your app and run export script to generate your static site:

yarn build
yarn export

Minor Changes

• Examples: add with-prerender example: 854a64745fbcb061d475a2dadf55151232eea549
• Chore(examples): update with-prerender README.md: 69fb6e2658ede1c8119df38f86514c5106dc55c8
• Fix(examples): Update README.md: 5876e7fac7132588e93a3ffc430937d2d7187629
• Refactor(after): make <After /> more readable: 2c7980937ff185e730160539439d1ee7dcd81b25
• Feat(after): add loadStaticProps: d78b9671c82729edbfb01f5377c4516c220fd088
• Feat(after): add ssg flag to AfterClientData type: 668fee6fa77e9ce8280a02aa00d3a102296baad6
• Feat(after): Update render.tsx: 05928977de081f131e7119af0d4285bf792a55f4
• Feat(after): call loadStaticProps in ssg mode: 226e4b8f28529e39a091d5739d20b9d61c2aaa9f
• Feat(after): change render to renderApp: b99189f83d45616ebb2dc23a64b7dee1c79aed00
• Feat(after)L add renderStatic method: 04b9fe4b7200a4fbd72e09a2b5806fdcd289b6a0
• Feat(after): add render method: 23c2e5e55f17a18f2104b6cc067fbf157333711d
• Feat(after): re-export renderApp and renderStatic: 3f43f265afe674c62fcc64fb81b12e9965f6b660
• Feat(after): export renderApp and renderStatic: 61810c5ebc1e280b25136327053b06df185e13dc
• Examples: Update with-prerender example: 2611083929b00b9175b5893b50de919afb5d17a8
• Feat(after): Update render: 6e512d6ea0b6fcf813cff9d6e7fb97ad0192a402
• Feat(after): Update Tests: eac8e48e305db03a95f5cca3c0f76482d4ffc913
• Feat(after): change loadInitialProps args order: 4a85396878a1877c4646c862173f59f061e9a0b5
• Feat(after): read data from page-data file prefetch(): d3bae33bc4fed2ff75cc890ae64b256c183f3827
• Examples(prerender): Use paths.js: ca3e20c3db4fe156d75906a310bd25e4dd04ad43
• Examples(prerender): Update server.js: 97b6ab98c2bcda54514308362574124041962ec1
• Examples(pre-render): Update About.js: 2570ceac67eb4738355f7dec001a4f2f796d1c7d
• Feat(after): fix index path page-data.json: b0648f9faf328c7e48d04909636fbb4900fdf4c6
• Fix-typo: f16c68a2c57a703ebff1609fd6f86751ab60415e
• Feat: load manifest plugin for examples: 2ea52a8d805e95867f10cbe02d4b65ac9c3c1d72
• Feat: move tests outside src directory: 47b24ba57d1818704aff89c5580650ae48ad7d1c
• Refactor: prettier update code style: a745a96cd3516fb92f84dfd3ca084707f01dd646
• Refactor: remove unsued files: 87410ef0c8efa87379c30a1c0122e3c2fcf30db6
• Feat: add github workflows: d82e52fba83399532f3081381607f0b6c4bceaa7
• Feat: add npmignore for basic-example folder: 2ef20f82026e5918a1e68a5a99013aed98773a8e
• Chore: update configs: d77eaa77209395f2a7af8814917d11c46e852991
• Chore: UPDATE yarn.lcok file: b9a9cf5db7dd0b8d1c2ca72bab69d08300f53d37
• Refactor: move workflows into root directory: 3dc549cedc6c90e9b512fb9d38393fbfb9d44cce
• Feat: update size limit: 16efe839a63227014c3851f7ceeb299b7fa1e7a4
• Feat: use tsdx for after.js package development: 0a88526d4974ddb69930aa35c7daa25340e2182c
• Merge pull request #471 from wokayme/fix-typo: 099c044f511f4caa6866f430afacf2f965b2f7ca
• Merge branch 'master' into feature/pre-render: 12cbd610fbfe292852ad2b69343ae86425015c36
• Refactor: remove unused files: 60e246645380de622787d9dbb5aea0cc53ef7011
• Refactor: remove yarn lock file for examples: 46e9f98a76094bfa145eb2dea7f96c8f05da633d
• Feat(examples): UPDATE razzle deps to v4: 5ad4910f10d62474f701e143e217907e0ade78be
• Feat: add manifest plugin to examples: b53398c3debda9eb5cad823bf426dec55304dcfd
• Chore: add cache folder to gitignore: 9b0d4122ea199230efc89dd912e0f83091dba425
• Feat: update depdencies of basic example: 744feed55f635943181ef7ccf9d80c8d28baee9b
• Merge pull request #507 from jaredpalmer/feature/support-razzle-4: 84db62b5f16c6ff019d4624f1033730857e5d0e5
• Merge branch 'master' into feature/pre-render: f000f7af4ca5246fc7c239efadb53c2dce774175
• Feat: UPDATE static-export example: c07e9faeea3da5ad84ba3f2c57206f59fc07de01
• Feat: UPDATE README.md: b3c7778818623073f58a9169d0f90a979d494031
• Feat: UPDATE README.me: 582a58124872ccaf7ab78baa128c723dfb6eedc5
• Feat: UPDATE REAMDME.md: a9a0a4fbcbfc5dcc6c840c253f96975c1d947f80
• Merge pull request #370 from jaredpalmer/feature/pre-render: 556dd2bed9c0941168f97ea5f054ebb6b78203ec

Patches

• Fix: update Document.js: a86c50cf9506c193b76e52d5f10d41d64146a925
• Fix: update README.md: 494365181490446409711ee3b1a8caf14d5e6b3c
• Fix: document title not changing: b7ef7e1c9b345beb9efbaefc3eb66a0f323850c1

Patches

• Fixing comparison of pathname change: b02eb93aff417426a18ac88cbfe3671f646fe62a
• Fix(after): make redirect and 404 page work: f5585f001a56ca7d107cc570c02cc79d42880c1e

in instant mode, getInitialProps gets called and at the same time the page scrolls to the top in blocked mode, getInitialProps gets called and then when the promise that returned from it get resolved we scroll to top

Patches

• fix(after): fix scroll to top in instantMode: c1fa60b3dacb70952e8a9e5f162e8d0ba29acab8

isLoading prop now gets injected to page components

isLoading prop shows that if getInitialProps is in pending state or not

function HomePage({ isLoading, error, data }) {
  if (isLoading) {
    return <Spinner />
  }

  if (error) {
    return <span>something went wrong</span>
  }

  return <MyComponent data={data} />
}

HomePage.getInitialProps = () => {
  try {
    const { data } = await fetchHomePage();
    return { data }
  } catch (error) {
    return { error }
  }
}

New transitionBehavior prop on <After />

// transitionBehavior: instant | blocked

<After transitionBehavior="instant" /> // default is `blocked`

blocked behavior (default):

navigation event occurs -> wait until getInitailProps get finished -> render the next page with injected props (I mean results of the getInitailProps)

instant behavior: navigation event occurs -> call getInitailProps -> render the next page -> re-render component when getInitailProps is finished with injected props

Minor Changes

• Feat(after): add TransitionBehavior type: 27d0c647daea5ecb3453803e49e34d1cdd3635fd
• Feat(after): add logic for instant transition: b335f4ca971e9038113394cabc81a3a8889e7498
• Feat(after): pass transitionBehavior to render render page: 6b37ea944ead928a0e968244e59f75a57f8beb72
• Feat(after): add isInstantTransition utility func: 30d906fa44a67720a73f4be7b9499348b501a7c0
• Feat(after): clean up render method: 5a64ed481091a792530fbfa919b09cb83e6f7eb1
• Feat(after): add isLoading state: 95dea98a9a4efe85965262641d72fd72f21539ff
• Merge pull request #348 from jaredpalmer/feature/transition-behavior: 639d3441cbf047fa85df951366c9e343d178ab78

Patches

• Fix Anchor Link Scrolling to Top on Click: a0483f2f32db61902618da73b28094ee11be01cd
• Merge pull request #360 from chansen424/fix-anchor-links-scrolling: 2d85c9210cb0c3466974947922702c7d6f3cd7d1

new transitionBehavior prop on <After />

transitionBehavior: instant | blocked

the default for value for transitionBehavior prop is blocked (we can also change the default to instant but it's going to be a breaking change)

blocked behavior (default):

navigation event occurs -> wait until getInitailProps get finished -> render the next page with injected props (I mean results of the getInitailProps)

instant behavior: navigation event occurs -> call getInitailProps -> render the next page -> re-render component when getInitailProps is finished with injected props

Patches

• Fix(after): add isJS utility: dd828e890ed4c3c6f5d0465c3d4d16bd7b44e9ef
• Fix(after): filter in JS files: 9cf025f45700f91a1fd0dd3d8b3316dab716eca1
• Fix(after): source maps: 666d1b4ecd74b4355d6a4d3f14443ebacb734094

Patches

Fix(after): don't pass match object from props to loadInitialProps

We Skipped version 2, there was a problem with our deployments to npm so a canary release tagged as a stable release and ...

Load Assets Faster!

Upgrading to version 3 should not take more than 10 minutes.

In v1, with asyncComponent you split part of your application into a new chunk, and on BROWSER when you need that part of your code it gets downloaded automatically. when page rendered on the server there was no way to understand which chunks needed for the current request so After.js only sends client.js and styles.css file, then on BROWSER with ensureReady method it tries to fetch chunks (split CSS and JS files) needed for the current request. and it's slow!

WHY?

1. browser must download client.js, then parse it and at the end, it executes the code. when code gets executed ensureReady method gets called, ensureReady finds and download chunks needed to render the current page and when all files get downloaded it start to re-hydrate.

2. browser will render the page without CSS styles (because we split them and it will get them when ensureReady called), this makes the site look ugly for 2,3 seconds (bad UX).

3. have you ever think about why CSS is render blocking? if browser finds a <link rel="stylesheet"> tag, it would stop rendering page and waits until CSS file be downloaded and parsed completely (this mechanism is necessary to have fast page renders), if CSS files attach to dom after page gets rendered, the browser must repaint the whole page. (painting is too much job for browser and it's slow)

in After.js 2 this problem is solved and it sends all JS and CSS files needed for current requests in the initial server response.

READ MORE

Major Changes

• Chore: update examples for new version: 0339d4ffccef14462e90d7e956046c2ab1e90716
• V3: #323

Minor Changes

• Merge branch 'master' of https://github.com/jaredpalmer/after.js: 9ce92f3b16f48acf1a8da8cb484c074590a32c60
• Feat(create-after-app): update default template: ae581ee46e03315f08d86505611751eb70f43c8e
• Chore: update UPGRADING.md: 65bb6052cfd3c2c0a890af046441ecfb6c613cf2

Patches

• Update README.md: 8c49bf0451c0e3959f976627739d501d96b8bf98
• Update README.md: be4f13eff789420474c66b0de8eace06b285d8ec
• Fix(after): fix typescript error: 048a46b6b92cfd3cc0e908ee4d706d80237d68e9