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

Make project compatible with server-side render #53

Closed
6 tasks done
2fd opened this issue Nov 4, 2019 · 2 comments
Closed
6 tasks done

Make project compatible with server-side render #53

2fd opened this issue Nov 4, 2019 · 2 comments

Comments

@2fd
Copy link
Contributor

2fd commented Nov 4, 2019

Motivation:

We are adopting gatsbyjs as our framework to generate static sites and it will be a goal if we could use this project because:

  • it will help maintain a consistent experience through sites
  • it will be easier and faster develop new sites

Curren limitations:

The only restriction to make a project compatible with server-side render with gatsbyjs is never access the Web APIs (DOM, Window, Storage, etc) outside of componentDidMount or useEffect

Currently only src/components/Atlas/Atlas.tsx isn't compatible with SSR (because a dependency). To avoid a compilation error we must be able to import each component individually.

Changes required

  • Avoid index import
-    import { Locale } from '../..'
+    import { Locale } from '../LanguageIcon/LanguageIcon.tsx'

https://github.com/decentraland/ui/blob/master/src/components/Footer/Footer.tsx#L8

  • Generate individual files for each component, so we can import as follow
    import { Footer } from 'decentraland-ui/lib/components/Footer'
  • Generate files for css-only components
    • './components/Button/Button.css'
    • './components/Container/Container.css'
    • './components/Card/Card.css'
    • './components/Dimmer/Dimmer.css'
    • './components/Dropdown/Dropdown.css'
    • './components/Header/Header.css'
    • './components/HeaderMenu/HeaderMenu.css'
    • './components/Modal/Modal.css'
    • './components/Loader/Loader.css'
    • './components/Pagination/Pagination.css'
    • './components/Popup/Popup.css'
    • './components/Radio/Radio.css'
    • './components/Segment/Segment.css'
    • './components/Table/Table.css'
# ./components/Button/Button.css
+ export { Button } from 'semantic-ui-react'
+ import './Button.css'

Others improvements:

  • avoid componentWillMount: is deprecated and it will be removed in next major more
  • move Locale definition outside LanguageIcon
  • move react-tile-map inside Atlas.tsx
@cazala
Copy link
Member

cazala commented Feb 27, 2020

Closed by #60

@cazala cazala closed this as completed Feb 27, 2020
@brennanfife
Copy link

SSR works with v2.15.0, but at some point, it became incompatible (even before v3.0.0)

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

3 participants