mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Jiachi LiuandGitHub
db72cb12d9
Follow up for #54202, use swc AST to determine the directives. Also add server actions directives for extendibility here in case we might need it in the future Closes NEXT-1538
46 lines
898 B
JavaScript
46 lines
898 B
JavaScript
'use client'
|
|
|
|
import { Suspense } from 'react'
|
|
import styled from 'styled-components'
|
|
import { createDataFetcher } from '../../../lib/data'
|
|
|
|
const Footer = styled.div`
|
|
border: 1px solid orange;
|
|
color: blue;
|
|
`
|
|
|
|
const FootInner = styled.span`
|
|
padding: 2px;
|
|
color: orange;
|
|
`
|
|
|
|
const readData = createDataFetcher('streaming', {
|
|
timeout: 4000,
|
|
expire: 4000,
|
|
})
|
|
|
|
function SuspenseyFooter() {
|
|
readData()
|
|
// generate large chunk of text to let the suspensey styling be inserted before the suspense script
|
|
return (
|
|
<FootInner id="footer-inner">
|
|
{'(generate-large-footer-text)'.repeat(30)}
|
|
</FootInner>
|
|
)
|
|
}
|
|
|
|
export default function page() {
|
|
return (
|
|
<div>
|
|
<Footer id="footer">
|
|
{`wait for `}
|
|
<Suspense fallback={`fallback`}>
|
|
<SuspenseyFooter />
|
|
</Suspense>
|
|
</Footer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const dynamic = 'force-dynamic'
|