Skip to content

Commit

Permalink
Upgrade Nextra and Next.js (#256)
Browse files Browse the repository at this point in the history
* upgrade nextra and next

* add blog index page; fix blog 404

* update README
  • Loading branch information
shuding authored Mar 6, 2022
1 parent a278fec commit 0f2cd78
Show file tree
Hide file tree
Showing 23 changed files with 733 additions and 324 deletions.
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ pnpm dev

And visit `localhost:3000` to preview your changes.

## Contributing

When making a change, or creating a new page, please make sure to edit all language files. You can simply copy the content of the edited English document (or the edited paragraph) and apply it to other language files. And then, volunteers are welcome to help with any untranslated sections.

## Contributors

- https://github.com/vercel/swr-site/graphs/contributors
Expand Down
27 changes: 27 additions & 0 deletions components/blog-index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { getPagesUnderRoute } from "nextra/context";
import Link from "next/link";

export default function BlogIndex({ more = "Read more" }) {
return getPagesUnderRoute("/blog").map((page) => {
// Alias `<a>` to avoid it being replaced by MDX components.
const A = "a";
return (
<div className="">
<h3>
<Link href={page.route}>
<A style={{ color: "inherit", textDecoration: "none" }}>
{page.meta?.title || page.frontMatter?.title || page.name}
</A>
</Link>
</h3>
<p className="opacity-80">
{page.frontMatter?.description}{" "}
<Link href={page.route}>{more + " →"}</Link>
</p>
{page.frontMatter?.date ? (
<p className="opacity-50 text-sm">{page.frontMatter.date}</p>
) : null}
</div>
);
});
}
8 changes: 1 addition & 7 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
const withNextra = require("nextra")({
theme: "nextra-theme-docs",
themeConfig: "./theme.config.js",
unstable_stork: false,
unstable_contentDump: true,
unstable_flexsearch: true,
unstable_staticImage: true,
});

Expand Down Expand Up @@ -43,11 +42,6 @@ module.exports = withNextra({
destination: "/blog/swr-v1",
statusCode: 301,
},
{
source: "/blog",
destination: "/blog/swr-v1",
statusCode: 302,
},
{
source: "/docs",
destination: "/docs/getting-started",
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
"focus-visible": "^5.1.0",
"intersection-observer": "^0.10.0",
"markdown-to-jsx": "^6.11.4",
"next": "^12.0.8",
"nextra": "^2.0.0-alpha.24",
"nextra-theme-docs": "^2.0.0-alpha.23",
"next": "^12.1.0",
"nextra": "^2.0.0-alpha.34",
"nextra-theme-docs": "^2.0.0-alpha.34",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-intersection-observer": "^8.26.2"
Expand Down
9 changes: 9 additions & 0 deletions pages/blog.en-US.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
searchable: false
---

<h1 className="text-center font-extrabold md:text-5xl mt-8 border-b pb-6">SWR Blog</h1>

import BlogIndex from '../components/blog-index'

<BlogIndex/>
9 changes: 9 additions & 0 deletions pages/blog.es-ES.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
searchable: false
---

<h1 className="text-center font-extrabold md:text-5xl mt-8 border-b pb-6">SWR Blog</h1>

import BlogIndex from '../components/blog-index'

<BlogIndex/>
9 changes: 9 additions & 0 deletions pages/blog.ja.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
searchable: false
---

<h1 className="text-center font-extrabold md:text-5xl mt-8 border-b pb-6">SWR Blog</h1>

import BlogIndex from '../components/blog-index'

<BlogIndex/>
9 changes: 9 additions & 0 deletions pages/blog.ko.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
searchable: false
---

<h1 className="text-center font-extrabold md:text-5xl mt-8 border-b pb-6">SWR Blog</h1>

import BlogIndex from '../components/blog-index'

<BlogIndex/>
9 changes: 9 additions & 0 deletions pages/blog.ru.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
searchable: false
---

<h1 className="text-center font-extrabold md:text-5xl mt-8 border-b pb-6">SWR Blog</h1>

import BlogIndex from '../components/blog-index'

<BlogIndex/>
9 changes: 9 additions & 0 deletions pages/blog.zh-CN.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
searchable: false
---

<h1 className="text-center font-extrabold md:text-5xl mt-8 border-b pb-6">SWR 博客</h1>

import BlogIndex from '../components/blog-index'

<BlogIndex more="阅读更多"/>
1 change: 1 addition & 0 deletions pages/blog/swr-v1.en-US.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png
description: 'Almost 2 years ago we open sourced SWR, the tiny data-fetching React library that people love. Today we are reaching another milestone: the 1.0 version of SWR.'
date: August 27th, 2021
---

import Callout from 'nextra-theme-docs/callout'
Expand Down
251 changes: 251 additions & 0 deletions pages/blog/swr-v1.es-ES.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
---
image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png
description: 'Almost 2 years ago we open sourced SWR, the tiny data-fetching React library that people love. Today we are reaching another milestone: the 1.0 version of SWR.'
date: August 27th, 2021
---

import Callout from 'nextra-theme-docs/callout'
import Bleed from 'nextra-theme-docs/bleed'

import Authors, { Author } from 'components/authors'

# Announcing SWR 1.0

<Authors date="August 27th, 2021">
<Author name="Shu Ding" link="https://twitter.com/shuding_" />
<Author name="Jiachi Liu" link="https://twitter.com/huozhi" />
</Authors>

Almost 2 years ago we [open sourced](https://twitter.com/vercel/status/1188911002626097157) SWR, the tiny data-fetching React library that people love. Today we are reaching another milestone: the 1.0 version of SWR!

## What’s New

### Smaller Size

[Performance](/docs/advanced/performance) is one of the most important features of SWR. In 1.0, we made the library significantly smaller **without removing any existing features**:

- 41% smaller core (24% smaller when gzipped, **3.9 kB**)
- 52% smaller package install size
- Improved tree-shaking

There are many reasons to make the library lightweight: your application will have a smaller bundle, a leaner runtime, and a smaller `node_modules` directory.

We’ve also improved the bundling of the package, and it now supports path imports:

```js
import useSWR from 'swr'
import useSWRInfinite from 'swr/infinite'
```

If you are not using `useSWRInfinite`, it will not be included in your application.

### Fallback Data

In 1.0, there’s a new `fallback` option that you can provide any pre-fetched data as the initial value of all SWR hooks with specific keys:

```jsx
<SWRConfig value={{
fallback: {
'/api/user': { name: 'Bob', ... },
'/api/items': ...,
...
}
}}>
<App/>
</SWRConfig>
```

This is very helpful for scenarios such as SSG, SSR, and data mockup for testing. Check the docs [Next.js SSG and SSR](/docs/with-nextjs) for more details.

For better consistency and to avoid confusion, the old `initialData` is now renamed to `fallbackData`, which still provides a single fallback value for the given hook.

### Immutable Mode

Sometimes you want to mark a resource as **immutable** if it will never change. It's better to disable automatic revalidations for it and only make the request once. There is now a helper hook to make this easier:

```jsx
import useSWRImmutable from 'swr/immutable'

// ...

useSWRImmutable(key, fetcher, options)
```

It has the exact same API as the `useSWR` hook, but it will never revalidate upon tab focus or network recovery. There's also a new option, `revalidateIfStale`, you can use to control the behavior precisely. More information can be found [here](/docs/revalidation#disable-automatic-revalidations).

### Custom Cache Provider

By default, SWR uses a single global cache to store all the data. In 1.0, you are able to customize it with the new `provider` option:

```jsx
<SWRConfig value={{
provider: () => myCache
}}>
<App/>
</SWRConfig>
```

You can use this new feature to do many powerful things. We have a couple of examples here: [_Mutate Multiple Keys with RegEx_](/docs/advanced/cache#mutate-multiple-keys-from-regex), [_LocalStorage Based Persistent Cache_](/docs/advanced/cache#localstorage-based-persistent-cache), [_Reset Cache Between Tests_](/docs/advanced/cache#reset-cache-between-test-cases).

This new cache provider API is also more compatible with concurrent rendering of React 18. If you are adding a cache provider, make sure to use the global `mutate` function returned from `useSWRConfig()`.

You can read the docs [Cache Provider](/docs/advanced/cache) for more details.

### useSWRConfig()

There is a new Hook API to return all global configurations, including the current cache provider and global `mutate` function:

```jsx
import { useSWRConfig } from 'swr'

function Foo () {
const { refreshInterval, cache, mutate, ...restConfig } = useSWRConfig()

// ...
}
```

More information can be found [here](/docs/global-configuration#access-to-global-configurations).

### Middleware

SWR Middlewares provide a new way for you to build and reuse abstractions on top of SWR hooks:

```jsx
<SWRConfig value={{ use: [...middleware] }}>

// ... or directly in `useSWR`:
useSWR(key, fetcher, { use: [...middleware] })
```

A lot of new ideas can be implemented with this feature, and we've built some examples: [_Request Logger_](/docs/middleware#request-logger), [_Keep Previous Data When Changing the Key_](/docs/middleware#keep-previous-result), and [_Serialize Object Keys_](/docs/middleware#serialize-object-keys).

Check the [Middleware API](/docs/middleware) for more details.

### Improvements and Better Test Coverage

Since 0.x, we've made hundreds of small improvements and bugfixes. SWR now has 157 tests that cover most of the edge cases in data fetching. Read the [Changelog](https://github.com/vercel/swr/releases) for more details.

### Docs Translations

Thanks to our [contributors](https://github.com/vercel/swr-site/graphs/contributors) and Nextra’s [i18n feature](https://nextra.vercel.app/features/i18n), we now offer SWR documentation in six different languages:

- [English](https://swr.vercel.app)
- [Spanish](https://swr.vercel.app/es-ES)
- [Simplified Chinese](https://swr.vercel.app/zh-CN)
- [Japanese](https://swr.vercel.app/ja)
- [Korean](https://swr.vercel.app/ko)
- [Russian](https://swr.vercel.app/ru)

## Migration Guide

### Update `useSWRInfinite` Imports

`useSWRInfinite` needs to be imported from `swr/infinite`:

```diff
- import { useSWRInfinite } from 'swr'
+ import useSWRInfinite from 'swr/infinite'
```

If you are using the corresponding types, update the import path too:

```diff
- import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr'
+ import { SWRInfiniteConfiguration, SWRInfiniteResponse } from 'swr/infinite'
```

### Change `revalidate` to `mutate`

`useSWR` no longer returns the `revalidate` method, change to `mutate` instead:

```diff
- const { revalidate } = useSWR(key, fetcher, options)
+ const { mutate } = useSWR(key, fetcher, options)


// ...


- revalidate()
+ mutate()
```

### Rename `initialData` to `fallbackData`

```diff
- useSWR(key, fetcher, { initialData: ... })
+ useSWR(key, fetcher, { fallbackData: ... })
```

### No More Default Fetcher

SWR no longer provides the default fetcher (a `fetch` call that parses the data as JSON). The easiest way to migrate the change is to use the `<SWRConfig>` component:

```jsx
<SWRConfig value={{ fetcher: (url) => fetch(url).then(res => res.json()) }}>
<App/>
</SWRConfig>

// ... or
useSWR(key, (url) => fetch(url).then(res => res.json()))
```

### Recommend to Use the Hook-Returned `mutate`

This is **not** a breaking change, but we will now _recommend_ to always use the `mutate` returned from the `useSWRConfig` hook:

```diff
- import { mutate } from 'swr'
+ import { useSWRConfig } from 'swr'


function Foo () {
+ const { mutate } = useSWRConfig()

return <button onClick={() => mutate('key')}>
Mutate Key
</button>
}
```

If you are not using a cache provider, the current global import `import { mutate } from 'swr'` still works.

### Renamed Types

If you are using TypeScript, the following type names have been changed for consistency:

| 0.x (deprecated) | 1.0 | Note |
| ------------------------------ | -------------------------- | ----------------------- |
| `ConfigInterface` | `SWRConfiguration` | |
| `keyInterface` | `Key` | |
| `responseInterface` | `SWRResponse` | |
| `RevalidateOptionInterface` | `RevalidatorOptions` | |
| `revalidateType` | `Revalidator` | |
| `SWRInfiniteResponseInterface` | `SWRInfiniteResponse` | moved to `swr/infinite` |
| `SWRInfiniteConfigInterface` | `SWRInfiniteConfiguration` | moved to `swr/infinite` |

### Beta and Unofficial Feature Users

If you are using a beta version of SWR, or using any undocumented APIs, please be aware of the following changes:

- `import { cache } from 'swr'` is removed; use the new [`useSWRConfig` API](#useswrconfig) instead.
- `import { createCache } from 'swr'` is removed; use the new [Cache Provider API](/docs/advanced/cache) instead.
- `revalidateWhenStale` is renamed to `revalidateIfStale`.
- `middlewares` is renamed to `use`.

### Changelog

Read the full Changelog [on GitHub](https://github.com/vercel/swr/releases).

## What’s Next

In future releases, we will keep improving the library while maintaining the stability. We are also aiming to embrace future React versions, as several new features and improvements in 1.0 are already preparing for that. In addition, we are also working on new features to improve the experience of doing data fetching in React and the experience of using this library.

If you have any feedback about this release, please [let us know](https://github.com/vercel/swr/discussions).

## Thank You!

Special thanks to [Toru Kobayashi](https://twitter.com/koba04) and [Yixuan Xu](https://twitter.com/yixuanxu94) for their contributions to the library, and [Paco Coursey](https://twitter.com/pacocoursey), [uttk](https://github.com/uttk), [Tomohiro SHIOYA](https://github.com/shioyang), [Markoz Peña](https://github.com/markozxuu), [SeulGi Choi](https://github.com/cs09g), [Fang Lu](https://github.com/huzhengen), [Valentin Politov](https://github.com/valentinpolitov) for their work on the translations and docs. This release can't happen without them.

We also want to thank the entire community, our [110 contributors](https://github.com/vercel/swr/graphs/contributors) (+ [45 docs contributors](https://github.com/vercel/swr-site/graphs/contributors)), and everyone who helped and gave us feedback!
Loading

1 comment on commit 0f2cd78

@vercel
Copy link

@vercel vercel bot commented on 0f2cd78 Mar 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.